createEffect y side effects en SolidJS
Contenido del curso
Jeisson Felipe Rodriguez Prieto
Sebastian Lomas
Jeisson Felipe Rodriguez Prieto
Kenneth Angulo L
Kenneth Angulo L
Cesar Payro
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> <h2>Count: {count()}</h2> <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.
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:
¿Qué es el createEffect? 🤔🤔🤔
La cajita mágica :package:🪄
¡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!
¿Cuándo debo usar createEffect en Solid.js?
Debes utilizar createEffect siempre que necesites sincronizar el estado interno de tu aplicación con sistemas externos o realizar acciones secundarias (conocidas como side effects). Imagina que tienes un carrito de compras; no quieres que los datos se pierdan si el usuario recarga la página. Aquí es donde entra esta primitiva: puedes envolver la lógica de guardado en localStorage o sessionStorage dentro del efecto.
En lugar de calcular valores derivados para la interfaz, los efectos brillan en tareas como manipular el DOM directamente, suscribirse a eventos del navegador, o actualizar bases de datos locales. Piensa en createEffect como un observador silencioso: se queda esperando en segundo plano y, en el momento exacto en que una de sus dependencias cambia, ejecuta la tarea asignada sin interferir con el renderizado visual de tus componentes.
¿Qué pasa si uso múltiples signals juntos?
Si incluyes dos, tres o más signals dentro del mismo createEffect, la función se volverá a ejecutar cada vez que cualquiera de esos signals cambie su valor. Solid agrupa estas dependencias de forma inteligente y automática.
Por ejemplo, si tienes un signal para nombre y otro para apellido, y los unes dentro del efecto para actualizar el título de la pestaña del navegador (document.title), el efecto reaccionará a las actualizaciones de ambos de manera independiente. Lo más interesante es cómo maneja la eficiencia: si por alguna razón actualizas ambos signals exactamente al mismo tiempo en un bloque de código síncrono, Solid agrupará esos cambios (batching) y ejecutará el efecto una sola vez, en lugar de hacerlo dos veces. Esto garantiza que tus operaciones se mantengan altamente optimizadas.
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?)
