Las derived signals son funciones que combinan señales existentes para crear nuevos valores reactivos sin necesidad de declarar primitivas nuevas. Si trabajas con sistemas reactivos en JavaScript y quieres escribir código más limpio y componible, esta técnica te permite encapsular lógica derivada y reutilizarla donde la necesites.

Cómo organizar los efectos antes de crear señales derivadas

Antes de pensar en composición, conviene ordenar la casa. La idea es agrupar cada actualización del DOM dentro del createEffect que depende de la señal correspondiente, así cada efecto tiene una responsabilidad clara.

En el ejemplo trabajamos con tres elementos del HTML que dependen de la misma señal count:

• El valor actual del contador.
• Un valor double que multiplica count por 2.
• Un valor isDivisibleByThree que evalúa si count es divisible entre 3.

Para cada uno se crea un createEffect que recibe una función. Dentro de esa función se hace un console.log para depurar y luego se modifica el textContent del elemento con el id correspondiente. Por ejemplo, para double la operación es count * 2, y para isDivisibleByThree se usa count % 3 === 0.

Al ejecutar la app y empezar a incrementar el contador, todos los efectos se disparan porque dependen de la misma señal. Funciona, pero el código se vuelve repetitivo y poco amigable de mantener.

Qué son las derived signals y por qué son tan poderosas

Una derived signal no es una primitiva nueva. Es simplemente una función que internamente lee otras señales y devuelve un valor calculado a partir de ellas. Esa es toda la magia.

En lugar de repetir count * 2 dentro de cada efecto que lo necesite, defines una variable así:

js const doubleCount = () => count() * 2; const isDivisibleByThree = () => count() % 3 === 0;

Ahora, en cualquier lugar donde antes escribías la expresión completa, llamas a la función derivada. El código queda más legible y la lógica vive en un solo lugar.

¿Qué es una derived signal? Es una función que combina una o más señales para producir un nuevo valor reactivo. No requiere una API especial: basta con envolver la operación en una función que lea las señales originales.

¿En qué se diferencia una derived signal de un createEffect? El efecto reacciona a cambios y produce side effects como actualizar el DOM. La señal derivada solo calcula y devuelve un valor que otros efectos o señales pueden consumir.

Por qué funciona la composición con señales

Aquí está la parte interesante: como las señales son funciones, el algoritmo reactivo puede rastrear automáticamente cuándo se están ejecutando. Cuando un createEffect invoca a doubleCount, esa función a su vez invoca a count internamente. El sistema detecta esa lectura, sabe que el efecto está activo y registra la dependencia.

Eso significa que cualquier función, por muy anidada que esté, si en algún punto lee una señal, queda automáticamente suscrita a sus cambios. Esta propiedad es la que habilita la composición: puedes encadenar señales derivadas que dependen de otras señales derivadas y todo el grafo de dependencias se mantiene actualizado sin esfuerzo manual.

¿Necesito declarar las dependencias manualmente? No. El tracking es automático: con solo llamar a la señal dentro de la función derivada o del efecto, el sistema reactivo registra la dependencia.

Conceptos y habilidades clave de la clase

Para dominar este patrón conviene tener claros algunos términos que aparecen en el flujo:

• createEffect: función que ejecuta side effects cada vez que cambia alguna de las señales que lee internamente. Es donde haces cosas como modificar el DOM con textContent.
• Signal: la primitiva reactiva base, expuesta como función para leer su valor actual.
• Derived signal: función que combina señales y devuelve un valor calculado, manteniendo la reactividad sin necesidad de almacenar estado adicional.
• Dependency tracking: mecanismo interno que detecta qué señales lee cada efecto o función derivada para reejecutarlos cuando esos valores cambian.
• Composición reactiva: capacidad de construir señales derivadas a partir de otras, formando cadenas de cómputo que se actualizan solas.

Y las habilidades que practicas al aplicar esto son: organizar efectos por responsabilidad, refactorizar expresiones repetidas en funciones derivadas y razonar sobre el grafo de dependencias de tu app.

¿Has refactorizado alguna parte de tu código usando señales derivadas? Cuéntame en los comentarios qué cambios notaste en legibilidad y mantenimiento, y nos vemos en la próxima clase para conocer los memos como técnica de optimización.