Uso de Create Effects en Solid.js

Dominar los effects en SolidJS es fundamental para construir aplicaciones reactivas que respondan de forma inteligente a los cambios de estado. Esta segunda primitiva reactiva permite ejecutar side effects cada vez que un signal cambia, sin necesidad de gestionar manualmente las dependencias. A continuación se explica cómo funciona createEffect, su detección automática de dependencias y casos de uso prácticos.

¿Cómo funciona createEffect en SolidJS?

Al igual que createSignal, la función createEffect se importa directamente desde la librería de SolidJS [0:18]. Su sintaxis es sencilla: se invoca pasándole una función como argumento. Dentro de esa función se coloca cualquier side effect que deba ejecutarse cuando alguna de sus dependencias cambie.

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

const [count, setCount] = createSignal(0);

createEffect(() => { console.log("count changed", count()); });

Lo notable de createEffect es su detección automática de dependencias [0:50]. No es necesario declarar explícitamente qué signals debe observar. El effect inspecciona internamente todas las expresiones que se ejecutan dentro de su función y detecta cuáles son signals. Cuando cualquiera de esos signals cambia, el effect se reejecuta automáticamente.

¿Se ejecuta múltiples veces si uso el mismo signal varias veces?

No. Los effects en SolidJS son lo suficientemente inteligentes para evitar ejecuciones redundantes [1:22]. Si dentro de un effect se llama al mismo signal dos o tres veces, el effect no se ejecuta múltiples veces por cada referencia. Simplemente corre una sola vez cuando el signal cambia, ejecutando toda la función de principio a fin.

js createEffect(() => { console.log("primer log:", count()); console.log("segundo log:", count()); });

En el ejemplo anterior, al cambiar count, ambos console.log se ejecutan, pero el effect completo solo corre una vez por cambio.

¿Puede un effect depender de múltiples signals?

Absolutamente. Los effects no están limitados a un solo signal [1:54]. Es posible tener cualquier cantidad de signals como dependencias dentro de un mismo effect. Cuando cualquiera de ellos cambie, el effect completo vuelve a ejecutarse.

js const [count, setCount] = createSignal(0); const [count2, setCount2] = createSignal(0);

createEffect(() => { console.log("count changed", count()); console.log("count2 changed to", count2()); });

Al cambiar el primer o el segundo signal, todo el bloque del effect se reejecuta mostrando los valores actualizados de ambos [3:05].

¿Para qué sirven los side effects con createEffect?

Un side effect es cualquier operación que ocurre fuera del estado interno de la aplicación [3:30]. Los effects son ideales para sincronizar el estado reactivo con el mundo exterior. Algunos ejemplos prácticos:

• Persistir datos en el navegador: guardar valores en sessionStorage o localStorage cada vez que un signal cambia.
• Hacer peticiones a una API: ejecutar un fetch cuando cambia un signal de paginación.
• Sincronizar con bases de datos: almacenar información actualizada de forma automática.

js createEffect(() => { sessionStorage.setItem("count", count()); });

En este caso, cada vez que count cambia, el valor se almacena automáticamente en el session storage del navegador [3:45]. Esto se puede verificar directamente desde las herramientas de desarrollo.

¿Cuándo usar createEffect en aplicaciones reales?

Un caso muy común es un sistema de paginación [4:15]. Cuando se tiene un signal ligado al número de página, un effect puede ejecutar automáticamente una petición a la API cada vez que la página cambie, sin necesidad de lógica adicional para rastrear dependencias.

SolidJS utiliza los effects de forma intensiva en su sistema interno, lo que refuerza su importancia como primitiva fundamental del framework. Combinados con los signals, los effects forman la base del modelo de reactividad granular que caracteriza a SolidJS: solo las partes del DOM que dependen de un signal específico se actualizan cuando este cambia [2:40].

Si ya dominas signals y effects, el siguiente paso natural es conocer los memos, la tercera primitiva reactiva que permite optimizar las actualizaciones dentro del sistema de reactividad. ¿Qué side effects implementarías con createEffect en tus proyectos? Comparte tu experiencia.