Contenido del curso
Reactividad a profundidad
- 6

Qué es la reactividad en Solid
05:15 min - 7

Creación de una Librería Reactiva MiniSolid desde Cero
06:46 min - 8

Implementación de Signals en Librería Reactiva Solid
07:01 min - 9

Cómo createEffect conecta signals y efectos
08:50 min - 10

Señales derivadas sin nuevas primitivas
04:40 min - 11

createMemo para evitar renderizados innecesarios
Viendo ahora - 12

Cómo Solid convierte JSX al DOM real
03:53 min
Renderizado en Solid
Reactividad en Listas
Componentes
createMemo para evitar renderizados innecesarios
Resumen
La primitiva createMemo es la pieza que falta para que tu sistema reactivo deje de hacer renderizados innecesarios. Si ya entendiste signals y effects, aprender a memorizar valores computados te permitirá escalar aplicaciones sin pagar el costo de ejecuciones repetidas que no cambian nada.
¿Qué problema resuelve createMemo en un sistema reactivo?
Cuando trabajas con signals derivados, es común que la misma función se ejecute varias veces aunque su resultado no haya cambiado. En aplicaciones pequeñas no se nota, pero al escalar empiezas a sentir el peso de cada cálculo redundante.
Imagina que tienes un signal derivado llamado isDivisibleByThree. Cada vez que el contador cambia, esa función se evalúa, incluso si el resultado sigue siendo false. Ahí es donde entra el memo: guarda el valor previo y solo dispara a sus suscriptores cuando hay un cambio real.
¿Qué es un memo en programación reactiva? Es una primitiva que memoriza el resultado de una función computada y solo notifica a los effects dependientes cuando ese valor cambia, evitando ejecuciones innecesarias.
¿Cómo se construye internamente un createMemo?
La idea central que debes entender es que un memo no es una primitiva nueva desde cero. Internamente, un memo es la combinación de un signal y un effect trabajando juntos.
El flujo es así:
- Creas un signal interno que va a almacenar el valor memorizado.
- Creas un effect que ejecuta la función que recibió el memo.
- Comparas el valor recién calculado con el valor previo guardado en el signal.
- Solo si son diferentes, ejecutas el setter del signal.
- Retornas el getter de ese signal como resultado del memo.
Ese retorno es lo que tus componentes consumen, igual que harían con cualquier otro signal derivado.
¿Por qué un effect dentro del memo?
La función que pasas al createMemo puede leer otros signals dentro de ella, como un count o cualquier valor reactivo. Al envolver esa lógica en un createEffect, te aseguras de que el memo se vuelva a evaluar automáticamente cada vez que sus dependencias cambien.
En ese mismo effect haces la comparación: tomas el valor actual de la función y lo contrastas con el valor almacenado en el signal interno. Si son distintos, llamas al setter. Si son iguales, no haces nada y los suscriptores no se enteran.
¿Cuál es el rol del setter en este flujo?
Los setters son los que avisan a todos los suscriptores. Si nunca ejecutas un set, ningún effect dependiente se va a ejecutar. Esa es la razón por la que el memo ahorra ciclos: la comparación previa funciona como un guardia que bloquea actualizaciones redundantes.
¿Cómo evita un memo renderizados innecesarios? Compara el valor calculado con el almacenado y solo dispara el setter si son diferentes, así los effects suscritos no se ejecutan cuando el resultado no cambió.
¿Cómo se usa createMemo en el código real?
La sintaxis es prácticamente idéntica a la de un signal derivado. La diferencia es que envuelves la función dentro de createMemo. Después de implementarlo y de importarlo desde tu librería, vas a notar el cambio inmediato al revisar la consola.
Por ejemplo, con isDivisibleByThree envuelto en un memo, vas a ver que el log solo aparece cuando el valor pasa de true a false o viceversa. Mientras el resultado se mantenga, no hay ejecución extra. Estás salvando ciclos de renderizado y actualizaciones reales en el sistema.
¿Cómo se conectan signals, effects y memos?
Aquí está la belleza del modelo: todo es composición de funciones. Un signal es una función. Un effect es una función que reacciona a signals. Y un memo es una función que combina ambos para memorizar un cálculo.
Cuando entiendes que estas tres primitivas se construyen unas sobre otras, empiezas a ver el patrón detrás de Solid y de cualquier sistema reactivo moderno. Las librerías agregan más primitivas encima, pero el núcleo siempre es el mismo: signals que notifican, effects que reaccionan y memos que optimizan.
Con esta pieza ya tienes el trío fundamental funcionando. ¿Te animas a probar tu propio memo con un cálculo costoso y medir la diferencia? Cuéntame en los comentarios qué caso de uso encontraste para optimizar.