Los createEffect son la segunda primitiva reactiva de SolidJS y la pieza que conecta tus signals con el mundo exterior: peticiones a APIs, almacenamiento en navegador, logs y cualquier side effect. Si ya entiendes los signals, esta primitiva es el siguiente paso natural para construir aplicaciones reactivas.

Cómo funciona createEffect en SolidJS

La primitiva se importa directamente desde la librería y recibe una función como argumento. Dentro de esa función pones cualquier lógica que quieras ejecutar cuando alguna dependencia cambie.

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

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

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

La magia está en que createEffect detecta automáticamente qué signals usas dentro de la función y se suscribe a ellos. No declaras dependencias manualmente: Solid las descubre por ti en tiempo de ejecución.

Al montar la aplicación, el efecto se ejecuta una primera vez. Después, cada vez que un signal usado dentro cambie, la función completa se vuelve a correr.

¿Qué es un side effect en SolidJS? Es cualquier acción que ocurre fuera del estado interno de la aplicación: guardar en sessionStorage, llamar a una API, escribir un log o sincronizar con una base de datos.

Por qué createEffect no se ejecuta de más

Una duda común es si llamar al mismo signal varias veces dentro del efecto provoca múltiples ejecuciones. La respuesta es no.

Si tienes dos console.log que leen el mismo signal, el efecto corre una sola vez por cambio y dentro de esa corrida se ejecutan los dos logs. Solid agrupa la reactividad: no multiplica ejecuciones por cantidad de lecturas, solo corre las veces necesarias para reflejar el cambio.

Eso te deja escribir efectos con varias expresiones sin miedo a penalizaciones de rendimiento por repetir lecturas.

Cómo manejar múltiples signals dentro de un mismo effect

Un efecto no está atado a un solo signal. Puedes leer cuantos quieras dentro de la misma función y Solid los registrará todos como dependencias.

Imagina que tienes dos contadores independientes, cada uno con su botón. Si el efecto lee ambos:

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

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

Entonces cualquier cambio en count o en count2 reejecuta el efecto completo. No importa cuál de los dos haya cambiado: la función vuelve a correr con los valores actualizados de ambos.

Esto es clave porque te permite componer lógica que reacciona a varias fuentes de estado sin escribir un efecto por cada signal.

Qué pasa con el DOM cuando solo cambia un signal

Aquí entra una diferencia importante: aunque el efecto reaccione a varios signals, el DOM solo actualiza las partes que usan el signal modificado. Si cambias count2, únicamente los nodos que leen count2 se vuelven a renderizar. El sistema de reactividad granular de Solid sigue funcionando con la precisión habitual.

Es decir: el efecto puede correr completo, pero el renderizado del DOM sigue siendo quirúrgico.

Para qué sirven los createEffect en una aplicación real

Los efectos brillan cuando necesitas sincronizar el estado reactivo con algo externo. Algunos casos prácticos directos del uso cotidiano:

• Guardar el estado en sessionStorage o localStorage del navegador cada vez que un signal cambie.
• Hacer fetch a una API cuando cambie un signal de paginación, filtros o búsqueda.
• Persistir datos en una base de datos remota.
• Disparar logs, métricas o eventos de analítica al modificarse el estado.

Un ejemplo concreto de persistencia en sesión se ve así:

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

Cada cambio en count actualiza el valor almacenado. Si abres las DevTools y revisas el sessionStorage, verás el número sincronizado en tiempo real con el contador de la interfaz.

¿Cuándo debo usar createEffect en lugar de modificar el estado directamente? Úsalo cuando necesites reaccionar a cambios de uno o varios signals con acciones que viven fuera del estado: red, almacenamiento, logs o cualquier API del navegador.

Por qué Solid usa effects internamente

Más allá de la API pública, Solid usa los effects en todo su sistema interno de reactividad. Es la pieza que conecta los cambios de signals con la actualización del DOM y con cualquier suscripción que dependa del estado. Entender bien esta primitiva te da una base para leer el comportamiento del framework cuando avances a temas más complejos.

En la próxima clase llega la tercera primitiva reactiva clave de Solid: los memos, que sirven para optimizar las actualizaciones del sistema reactivo cuando necesitas valores derivados. ¿Has usado efectos en otros frameworks como React? Cuéntame en los comentarios qué diferencias notas con el createEffect de Solid.