Si trabajas con Solid.js y quieres evitar renderizados innecesarios, necesitas entender la diferencia entre un signal derivado y un memo. Aquí aprendes cómo createMemo memoriza valores reactivos para que tus effects solo se ejecuten cuando realmente cambia el dato, algo clave para escalar aplicaciones reactivas.

Qué es un signal derivado en Solid

Un signal derivado es simplemente una función que envuelve un signal existente y le aplica una transformación. No es una primitiva nueva, es un patrón funcional que aprovecha el sistema reactivo de Solid.

Imagina que tienes un contador y quieres mostrar también el doble. En lugar de duplicar la lógica dentro del JSX, defines una función doubleCount que retorna count() * 2. Cuando la usas en el DOM con {doubleCount()}, Solid detecta el signal interno y se encarga de actualizar ese fragmento del template automáticamente.

Este patrón es limpio y mantenible, pero tiene un costo oculto que solo se nota cuando empiezas a observar el comportamiento real del sistema reactivo.

Por qué los signals derivados se ejecutan de más

Un signal derivado vuelve a calcularse cada vez que su dependencia cambia, incluso si el resultado final es idéntico al anterior. Y ese es el problema.

Mira este caso práctico del transcript: defines isDivisibleByThree como una función que evalúa count() % 3 === 0. Lo muestras en el DOM con un ternario para imprimir yes o no, y además creas un createEffect con un console.log que registra cada cambio.

¿Qué es un signal derivado en Solid? Es una función que lee uno o más signals existentes y devuelve un valor calculado. No es una primitiva: es un patrón funcional que reacciona a sus dependencias.

Al ejecutar la app, notarás algo curioso. Si el valor pasa de false a false otra vez, el effect sigue disparándose. Solid no sabe si el resultado cambió porque vuelve a evaluar la función desde cero cada vez. Eso es un re-render silencioso que ensucia tu consola y, en una app real, gasta ciclos del navegador sin necesidad.

Cómo se reproduce el problema en consola

Los pasos son simples y los puedes replicar en tu propio proyecto:

• Defines count con createSignal(0).
• Creas la función isDivisibleByThree que devuelve count() % 3 === 0.
• Envuelves un console.log dentro de un createEffect que llama a esa función.
• Incrementas el contador y observas la consola.

Verás que el log aparece en cada cambio de count, aunque el booleano siga siendo el mismo. Ahí es donde entra createMemo.

Cómo funciona createMemo y cuándo usarlo

createMemo es la tercera primitiva reactiva de Solid, junto con createSignal y createEffect. La importas desde solid-js y la usas envolviendo la función que antes era un signal derivado.

El cambio de sintaxis es mínimo: donde tenías const isDivisibleByThree = () => count() % 3 === 0, ahora escribes const isDivisibleByThree = createMemo(() => count() % 3 === 0). Internamente, Solid memoriza el resultado y compara el valor anterior con el nuevo antes de notificar a los effects suscritos.

¿Cuándo debo usar createMemo en lugar de un signal derivado? Úsalo cuando el cálculo se consume en varios lugares, cuando el resultado puede repetirse aunque las dependencias cambien, o cuando la operación es costosa.

El efecto inmediato es que el createEffect que antes se disparaba en cada cambio de count ahora solo se ejecuta cuando el booleano realmente cambia: cuando pasa de true a false o viceversa. El resto de actualizaciones quedan silenciadas.

Qué optimiza realmente un memo

La ganancia se nota en tres frentes concretos:

• Evita ejecuciones redundantes de effects suscritos al valor memorizado.
• Reduce el trabajo de pintado en el navegador cuando el resultado se usa dentro del DOM.
• Permite encadenar cálculos derivados sin multiplicar el costo computacional en cada render.

Piensa en un memo como un cache reactivo: guarda el último valor calculado y solo lo invalida cuando una de sus dependencias produce un resultado distinto.

Cómo encajan signals, effects y memos en Solid

Con createMemo cierras el trío de primitivas reactivas que Solid expone de fábrica. Cada una cumple un rol específico y se complementan entre sí.

• createSignal guarda estado reactivo y notifica cambios.
• createEffect ejecuta código secundario cuando un signal cambia.
• createMemo deriva un valor a partir de otros signals y memoriza el resultado.

¿Qué diferencia hay entre createEffect y createMemo? createEffect ejecuta efectos secundarios sin retornar valor. createMemo retorna un signal memorizado que otros pedazos del sistema pueden consumir.

Dominar esta separación es lo que te permite construir interfaces reactivas que escalan sin ensuciar la consola ni saturar el navegador. Y si quieres entender por qué Solid funciona así por dentro, el siguiente paso natural es construir tu propia versión mínima de la librería, lo que en el curso se llama Mini Solid.

¿Ya identificaste algún signal derivado en tu código que debería ser un memo? Cuéntame en los comentarios cómo lo refactorizaste.