Cómo createEffect conecta signals y efectos

Contenido del curso

No sé dónde empezar

Introducción a SolidJS

Reactividad a profundidad

Renderizado en Solid

Reactividad en Listas

Componentes

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:008:50

Cómo createEffect conecta signals y efectos

Curso de SolidJS

Clase 9 de 27

Clase 9 / 27

Recursos

Crear la primitiva createEffect desde cero te permite entender cómo funciona la reactividad en librerías como Solid, React o Vue, y cómo los efectos se conectan con los signals para reaccionar a cambios de estado. Esto es clave si quieres dominar sistemas de renderizado, templating y actualizaciones automáticas del DOM.

Los efectos no son magia: son funciones con side effects que se vuelven a ejecutar cuando cambia alguno de los signals que leen internamente. Y el truco para conectarlos está en una estructura de datos sencilla pero poderosa: un stack.

Qué es createEffect y cómo se conecta con los signals

Un createEffect es una función que recibe otra función como argumento. Esa función interna contiene los side effects, es decir, código que ocurre fuera del sistema reactivo pero que depende de los signals que lee.

La idea es simple: si dentro del efecto lees un signal, ese efecto queda automáticamente suscrito a ese signal. Cuando el signal cambie, el efecto se vuelve a ejecutar.

¿Qué hace createEffect en un sistema reactivo? Ejecuta una función y la registra como suscriptora de los signals que lea internamente, para volver a ejecutarla cada vez que esos signals cambien.

La sintaxis que queremos entregar al usuario se parece a la de Solid:

js createEffect(() => { console.log(count()); });

Cada vez que count cambie, ese console.log se dispara solo.

Por qué necesitas un stack global como contexto

Aquí viene lo interesante. Para que un signal sepa qué efecto lo está leyendo, necesitamos un canal de comunicación indirecto entre ambos. Ese canal es un stack global, una estructura LIFO (Last In, First Out) donde apilas funciones como si fueran una pila de platos.

El flujo dentro de createEffect tiene tres pasos claros:

Insertas la función del efecto en el stack global de contexto.
Ejecutas la función (que internamente puede leer signals).
Sacas la función del stack una vez termina la ejecución.

Ese contexto temporal es lo que permite que el signal, al ser leído, sepa qué efecto está activo en ese momento.

Cómo el signal detecta al efecto activo

Cuando dentro del efecto se llama al getter de un signal, ese signal hace un read. Durante ese read, mira el último elemento del stack, al que llamamos observer. Si hay un observer presente, el signal lo agrega a su lista interna de suscriptores.

Para la lista de suscriptores conviene usar un Set en lugar de un array, porque garantiza unicidad y permite inserciones rápidas sin duplicados.

js signal.subscribers.add(observer);

Así cada signal mantiene su propia lista de efectos interesados en sus cambios.

Cómo notificar a los suscriptores cuando cambia el signal

El setter del signal es donde ocurre la otra mitad del baile. Después de actualizar el valor interno, recorres el set de suscriptores y ejecutas cada función registrada.

js subscribers.forEach((fn) => fn());

Con eso, todos los efectos que dependen de ese signal se vuelven a ejecutar automáticamente. Si tienes diez efectos leyendo el mismo signal, los diez se disparan en cadena cuando cambia el valor.

¿Por qué se usa un Set para los suscriptores? Porque evita duplicados de forma nativa y permite agregar o eliminar efectos sin recorrer estructuras como un array.

Cómo probar el flujo completo en una app real

Para verificar que el sistema funciona, puedes crear dos efectos que lean el mismo signal de count. Uno hace un console.log y otro modifica el DOM directamente:

js import { createEffect } from './platzi-solid';

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

createEffect(() => { document.getElementById('counts').textContent = count(); });

En la primera ejecución ambos efectos corren porque se registran como suscriptores. Cada vez que el listener de clic dispara el setter del signal, los dos efectos se vuelven a ejecutar: el log cambia y el textContent del elemento se actualiza en pantalla.

Este flujo es exactamente el mismo patrón que usan frameworks como Solid, Vue o las señales de React. Cambian los nombres y algunas optimizaciones, pero la idea del stack como contexto y la lista de suscriptores está en el corazón de todos.

Conceptos clave que aparecen en la clase

Primitiva reactiva [00:08]: bloque básico de un sistema reactivo, como signals y effects.
Side effects [01:30]: acciones fuera del sistema reactivo que dependen de signals internos.
Stack LIFO [03:20]: estructura de datos donde el último elemento insertado es el primero en salir, usada como contexto global.
Observer [04:45]: el último efecto en el stack, al que el signal puede acceder durante un read.
Set de suscriptores [05:30]: colección única de efectos registrados en un signal.
Read y write del signal [06:10]: las dos operaciones donde se conectan signals y effects, lectura para suscribir y escritura para notificar.

¿Ya implementaste tu propio createEffect? Cuéntame en los comentarios qué parte del flujo te costó más entender y cómo lo resolviste.

Resumen

Qué es createEffect y cómo se conecta con los signals

La idea es simple: si dentro del efecto lees un signal, ese efecto queda automáticamente suscrito a ese signal. Cuando el signal cambie, el efecto se vuelve a ejecutar.

¿Qué hace createEffect en un sistema reactivo? Ejecuta una función y la registra como suscriptora de los signals que lea internamente, para volver a ejecutarla cada vez que esos signals cambien.

La sintaxis que queremos entregar al usuario se parece a la de Solid:

js createEffect(() => { console.log(count()); });

Cada vez que count cambie, ese console.log se dispara solo.

Por qué necesitas un stack global como contexto

El flujo dentro de createEffect tiene tres pasos claros:

Insertas la función del efecto en el stack global de contexto.
Ejecutas la función (que internamente puede leer signals).
Sacas la función del stack una vez termina la ejecución.

Ese contexto temporal es lo que permite que el signal, al ser leído, sepa qué efecto está activo en ese momento.

Cómo el signal detecta al efecto activo

Para la lista de suscriptores conviene usar un Set en lugar de un array, porque garantiza unicidad y permite inserciones rápidas sin duplicados.

js signal.subscribers.add(observer);

Así cada signal mantiene su propia lista de efectos interesados en sus cambios.

Cómo notificar a los suscriptores cuando cambia el signal

El setter del signal es donde ocurre la otra mitad del baile. Después de actualizar el valor interno, recorres el set de suscriptores y ejecutas cada función registrada.

js subscribers.forEach((fn) => fn());

Con eso, todos los efectos que dependen de ese signal se vuelven a ejecutar automáticamente. Si tienes diez efectos leyendo el mismo signal, los diez se disparan en cadena cuando cambia el valor.

¿Por qué se usa un Set para los suscriptores? Porque evita duplicados de forma nativa y permite agregar o eliminar efectos sin recorrer estructuras como un array.

Cómo probar el flujo completo en una app real

Para verificar que el sistema funciona, puedes crear dos efectos que lean el mismo signal de count. Uno hace un console.log y otro modifica el DOM directamente:

js import { createEffect } from './platzi-solid';

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

createEffect(() => { document.getElementById('counts').textContent = count(); });

Conceptos clave que aparecen en la clase

Primitiva reactiva [00:08]: bloque básico de un sistema reactivo, como signals y effects.
Side effects [01:30]: acciones fuera del sistema reactivo que dependen de signals internos.
Stack LIFO [03:20]: estructura de datos donde el último elemento insertado es el primero en salir, usada como contexto global.
Observer [04:45]: el último efecto en el stack, al que el signal puede acceder durante un read.
Set de suscriptores [05:30]: colección única de efectos registrados en un signal.
Read y write del signal [06:10]: las dos operaciones donde se conectan signals y effects, lectura para suscribir y escritura para notificar.

¿Ya implementaste tu propio createEffect? Cuéntame en los comentarios qué parte del flujo te costó más entender y cómo lo resolviste.

Comentarios (5)5 comentarios

Danny González

Hace 3 años

Esta demasiado bueno este curso

Kenneth Angulo L

Hace un mes

¿Qué pasa si varios efectos leen un signal?

Absolutamente todos los efectos suscritos se volverán a ejecutar de forma automática y sincronizada. Imagina que el signal es una alarma de incendios y los efectos son los aspersores de agua en diferentes habitaciones. No importa si tienes dos o cien aspersores; cuando la alarma se activa (el valor del signal cambia), envía una señal a todos los dispositivos conectados al mismo tiempo. A nivel de código, el signal recorre su estructura de datos (como un Set de suscriptores) usando un ciclo. Por cada efecto guardado en esa lista, invoca la función correspondiente con el nuevo valor. Esto es ideal para mantener la interfaz sincronizada: un efecto podría estar actualizando un contador en el header, otro podría estar guardando datos en localStorage, y ambos reaccionarán al instante sin interferir entre sí.

¿Cómo sabe el signal qué efecto ejecutar?

El secreto está en la fase de lectura o read. Cuando llamas a un signal dentro de un createEffect, el signal no solo te devuelve su valor actual, sino que hace una pausa para revisar el contexto global. Piensa en el signal como un creador de contenido y en el efecto como un fan. Cuando el fan (efecto) consume el contenido (lee el signal), el creador lo anota inmediatamente en su lista VIP de suscriptores. Para lograr esto en código, el signal accede al último elemento del stack de ejecución (el observer actual). Al encontrarlo, lo guarda en su propia memoria. De esta manera, cuando el valor del signal cambia en el futuro, ya tiene un directorio exacto de todas las funciones que dependen de él y simplemente las vuelve a ejecutar una por una.

Daniel Omar Hernández Muñoz

Hace 2 años

Un Set en JavaScript es una colección de valores únicos. Al asignarlo a una variable const, se crea un objeto que permite almacenar elementos sin duplicados. En el contexto de la reactividad de SolidJS, un Set se utiliza para los suscriptores de un signal. Cada vez que el signal cambia, se itera sobre el Set para notificar a todos los suscriptores, asegurando que cada uno reciba la actualización correspondiente. Esto optimiza el manejo de efectos reactivos en la interfaz de usuario.

Jhon Marco Achata Limachi

Una joya de clase 🚀

Luis Rodolfo Reyes

admiro también las habilidades del profesor, gracias a ello podemos apreciar también parte de cómo funciona por dentro solid.js, no cualquier profesor explica detalladamente cómo funciona por dentro una librería, ahora entiendo que el effect utiliza algo parecido a un observador que está atento a los cambios y realiza una ejecución

Introducción a SolidJS

SolidJS vs React: reactividad granular explicada

Python para Principiantes: Fundamentos y Aplicaciones Básicas

Signals en SolidJS: crea datos reactivos

createEffect y side effects en SolidJS

Signals derivados vs createMemo en Solid

Reactividad a profundidad

Qué es la reactividad en Solid

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

Implementación de Signals en Librería Reactiva Solid

Cómo createEffect conecta signals y efectos

Señales derivadas sin nuevas primitivas

createMemo para evitar renderizados innecesarios

Cómo Solid convierte JSX al DOM real

Renderizado en Solid

Configurando SolidJS con Tailwind para Todo App

Dark mode en SolidJS con signals

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

Renderizado de listas reactivas con For en Solid

Manejo de Eventos en Elementos HTML con SolidJS

Reactividad en Listas

Optimización de Renderizado y Reactividad en Listas con SolidJS

Cómo funcionan los stores en Solid JS

Stores de SolidJS para datos complejos

Función produce para mutar stores en Solid

Componentes

Qué son los componentes en Solid

Comunicación padre-hijo con props en SolidJS

Eventos personalizados entre componentes React

Persistencia con localStorage y useEffect

Deploy de app Solid en Netlify

Solid y el futuro del desarrollo web

Cómo createEffect conecta signals y efectos