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:

1. Insertas la función del efecto en el stack global de contexto.
2. Ejecutas la función (que internamente puede leer signals).
3. 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.