Señales derivadas sin nuevas primitivas

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:004:40

Señales derivadas sin nuevas primitivas

Curso de SolidJS

Clase 10 de 27

Clase 10 / 27

Recursos

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.

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

Señales derivadas sin nuevas primitivas