Introducción a SolidJS

1

Desarrollo Web Avanzado con Solid.js: Reactividad Eficiente

2

Python para Principiantes: Fundamentos y Aplicaciones Básicas

3

Uso de Signals en Solid.js para Datos Reactivos

4

Uso de Create Effects en Solid.js

5

Memos y Signals Derivados en Solid para Optimizar Actualizaciones

Quiz: Introducción a SolidJS

Reactividad a profundidad

6

Reactividad: Conceptos Prácticos y Aplicaciones en Solid

7

Creación de una Librería Reactiva MiniSolid desde Cero

8

Implementación de Signals en Librería Reactiva Solid

9

Creación de Efectos Reactivos en Librerías Web

10

Signals Derivados: Mejora y Optimización en Aplicaciones Reactivas

11

Implementación de `createMemo` en Sistemas Reactivos

12

Renderizado Reactivo en Solid: Uso de DOM Expressions

Quiz: Reactividad a profundidad

Renderizado en Solid

13

Implementación de TodoApp con Solid.js y Tailwind CSS

14

Implementación de Dark Mode con SolidJS y TailwindCSS

15

Renderizado Condicional en Solid: Técnicas y Optimización

16

Renderizado de listas y optimización con SolidJS

17

Manejo de Eventos en Elementos HTML con SolidJS

Quiz: Renderizado en Solid

Reactividad en Listas

18

Optimización de Renderizado y Reactividad en Listas con SolidJS

19

Implementación de Stores Reactivos en SolidJS

20

Uso de Stores en Solid para Optimizar Reactividad y Ergonomía

21

Uso de la función Produce en SolidJS para gestionar stores

Quiz: Reactividad en Listas

Componentes

22

Creación y Uso de Componentes en Solid para Mejora de Aplicaciones

23

Uso de Props para Comunicación entre Componentes en React

24

Manejo de Eventos y Corrección de Errores en Aplicaciones React

25

Uso de Local Storage para Guardar Estado de Aplicación Web

26

Despliegue de Aplicaciones Web con Netlify y SolidJS

27

Solid: Sistema Reactivo y Desafíos en Desarrollo Web

Quiz: Componentes

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Curso de SolidJS

Curso de SolidJS

Samuel Burbano

Samuel Burbano

Uso de Create Effects en Solid.js

4/27
Recursos

¿Qué son los effects en Solid.js?

Los effects son una de las primitivas reactivas clave en Solid.js, utilizadas para gestionar efectos secundarios o "side effects" en aplicaciones. Su importancia radica no solo en su uso interno dentro del sistema de Solid, sino también en cómo permiten a los desarrolladores trabajar con cambios de señales (signals) de manera eficiente.

¿Cómo se utilizan los Create Effects?

Para trabajar con los Create Effects, es esencial importarlos desde la biblioteca de Solid.js. Al igual que con las señales, en Solid importamos la primitiva con Create Effect, lo que nos permite definir efectos secundarios que estarán atentos a los cambios en las dependencias.

Ejemplo básico:

import { createEffect } from 'solid-js';

createEffect(() => {
  console.log('CountChanged');
});

Esta función toma otra función como su argumento y se ejecutará cada vez que alguna de sus dependencias internas cambie. Por ejemplo, si estamos observando un signal denominado count, cuando este cambie, el efecto se ejecutará automáticamente.

¿Qué tan inteligentes son los effects de Solid.js?

Los effects en Solid.js son notablemente avanzados. Son capaces de identificar automáticamente las signals que utilizan internamente, y re-ejecutar el effect solo cuando estos signals cambian. No importa cuántas veces se invoque el mismo signal dentro de un effect; éste se ejecutará solo cuando sea necesario.

Ejemplo con múltiples signals:

createEffect(() => {
  console.log('First signal changed');
  console.log('Second signal changed');
});

Este behavior inteligente optimiza el rendimiento al evitar ejecuciones innecesarias del efecto.

¿Se pueden combinar multiple signals dentro de un single effect?

Sí, los effects no se limitan a observar una sola signal. Puedes usar diversas expresiones que involucran múltiples signals. Por ejemplo, podrías tener un segundo signal para otra funcionalidad y observar ambos signals en el mismo efecto.

Ejemplo práctico:

Supongamos que tienes dos signals y deseas actualizar el sessionStorage cada vez que cambien. Puedes hacerlo así:

createEffect(() => {
  sessionStorage.setItem('count', count());
  sessionStorage.setItem('secondCount', secondCount());
});

Este snippet almacena el estado actual de dos signals en el sessionStorage del navegador cada vez que uno de ellos cambia.

Usos avanzados de los effects

Una de las grandes ventajas de los effects en Solid.js es su capacidad para interactuar con APIs externas y almacenar datos pertinentes fuera de la aplicación. Pueden utilizarse para realizar fetch de APIs, gestionar sistemas de paginación, o incluso almacenar datos en bases de datos o en el localStorage.

Por ejemplo, en un sistema de paginación, podrías ejecutar una nueva solicitud de fetch a una API cada vez que la página cambie:

createEffect(() => {
  fetch(`https://api.example.com/data?page=${page()}`)
    .then(response => response.json())
    .then(data => setData(data));
});

Esta capacidad extiende el potencial de Solid.js, permitiendo crear aplicaciones altamente eficientes y reactivas.

Con los efectos en Solid.js, los desarrolladores pueden gestionar de forma elegante y eficiente los cambios de estado dentro de sus aplicaciones. La próxima clase abordará otra primitiva reactiva clave de Solid: los memos, que optimizan aún más el sistema de reactividad. ¡Continúa aprendiendo y desarrollando habilidades para mejorar tus proyectos con Solid.js!

Aportes 4

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Primitivas reactivas ⚛️

En SolidJS, las primitivas reactivas son funciones y objetos que se utilizan para definir y gestionar el estado de un componente y reaccionar automáticamente a los cambios en ese estado. 🔄

🎣 Una de estas primitivas es el createEffect. 🎯

✨ El createEffect es un hook que permite ejecutar un efecto secundario, como una función, cuando algún valor reactivo dentro de su alcance cambia. 🔄

📝 Aquí tienes la sintaxis básica del createEffect:

	createEffect(() => {
  	// Aquí colocas el código que quieres ejecutar cuando los datos reactivos cambien.
	});

El createEffect se ejecutará automáticamente cada vez que alguno de los datos reactivos que se utilizan dentro de su bloque cambie.

Ejemplo de uso:

import { createEffect, createSignal } from 'solid-js';

function App() {
  const [count, setCount] = createSignal(0);
  createEffect(() => {
      console.log('El contador ha cambiado:', count());		
      // Aquí puedes realizar tareas adicionales que se deben ejecutar cuando el contador cambia.
  });
  return (
    <div>
      <h1>Count: {count()}</h1>
      <button onClick={() => setCount(count() + 1)}>
        +
      </button>
    </div>
  );
}

export default App;

En este ejemplo, cada vez que haces clic en el botón “Incrementar”, el contador cambiará y el createEffect se ejecutará automáticamente, registrando en la consola un mensaje con el nuevo valor del contador.

¿Qué es el createEffect? 🤔🤔🤔

La cajita mágica 📦🪄

¡Imagina que estás jugando con bloques y tienes una cajita mágica! Cuando pones bloques de diferentes colores en esa cajita, algo especial sucede. Cada vez que agregas o quitas un bloque, la cajita hace algo nuevo y emocionante. 😮

El poderoso createEffect 💫

Bueno, en Solid.js, esa cajita mágica sería el createEffect. Cuando pones cosas dentro de él, como números o palabras, se convierte en una especie de guardián que está atento a esos objetos. Si alguno de esos objetos cambia, el createEffect dice: “¡Ah, algo ha cambiado!”, y entonces hace una acción especial que le hayas dicho que haga. Esa acción puede ser mostrar un mensaje en una pantalla, cambiar algo en tu juego o hacer algo interesante.

Interactividad en tu juego 🎮🎉

Por ejemplo, podrías tener un contador en tu juego que cuente cuántas veces has saltado. Cada vez que presionas un botón para saltar, el createEffect podría estar escuchando y decirte en la pantalla “¡Has saltado 5 veces!” o “¡Has saltado 10 veces!” 🦘🦘.

Haciendo que tu aplicación brille ✨😄

Así que, en resumen, el createEffect es como una cajita mágica que está observando tus bloques y cuando algo cambia, hace cosas emocionantes para ti. ¡Es una forma genial de hacer que tu juego o aplicación sea interactiva y divertida!

hay alguna forma de 'agrupar' o 'separar' effect para no actualizar/loggear (en este ejemplo) **TODOS** los signals cuando solo **ALGUNO** de ellos cambia? por ejemplo, si quiero que un effect haga 'algo' cuando count1 se ejecuta y otro effect cuando count2 se ejecuta? (separacion de effects?)

Side effects:

Son acciones que no son parte del flujo principal del componente (entiéndase el flujo principal como el renderizado del DOM por parte de JS.), pero podrían afectar al mismo(estado) o a su comportamiento.

Acciones que se consideran Side Effects son:

  • Llamadas a API.
  • Almacenamiento local como sessionStorage u
    localStorage.