Optimizar un sistema reactivo es fundamental cuando las aplicaciones crecen en complejidad. El memo es la primitiva que evita renderizados innecesarios al memorizar valores computados, y su implementación revela un patrón elegante: internamente, un memo no es más que un signal y un effect trabajando en conjunto. Comprender esta mecánica te permite construir sistemas reactivos eficientes desde sus cimientos.
¿Por qué los signals derivados generan renderizados innecesarios?
Cuando se trabaja con signals derivados, como uno que calcula si un valor es divisible entre tres (isDivisibleBy3), el problema aparece al escalar [0:28]. Este signal derivado se ejecuta múltiples veces aunque su valor no cambie. En aplicaciones pequeñas el impacto es imperceptible, pero en sistemas grandes las actualizaciones consecutivas degradan el rendimiento de forma notable.
El create memo resuelve exactamente este problema. Su sintaxis es prácticamente idéntica a la de un signal derivado: una función que retorna un valor computado. La diferencia está en que ese valor queda memorizado, y los effects dependientes solo se ejecutan cuando el resultado realmente cambia [1:07].
¿Cómo se construye un memo con signals y effects?
La implementación del create memo sigue una lógica clara que combina las dos primitivas anteriores [1:44]:
- Se crea un signal interno con su correspondiente setter, usando la misma primitiva
createSignal.
- Se envuelve la lógica dentro de un effect que se ejecuta cada vez que las dependencias cambian.
- Dentro del effect, se obtiene el valor actual ejecutando la función que recibe el memo.
- Se compara el valor actual con el valor previo almacenado en el signal.
- Solo si los valores son diferentes, se ejecuta el setter del signal interno [2:35].
- El memo retorna el signal, que representa el valor memorizado.
Este mecanismo es poderoso porque si el resultado de la función no cambia, nunca se ejecuta el setter. Y sin un setter, los suscriptores de ese signal (otros effects) permanecen inactivos. Así se evitan ciclos de renderizado innecesarios [3:10].
¿Qué sucede cuando el valor no cambia?
Al implementar isDivisibleBy3 como un create memo, el comportamiento cambia radicalmente. Cuando el contador incrementa de un valor a otro, el memo evalúa si el resultado de count % 3 === 0 es diferente al anterior [3:32]. Si pasa de true a false, se ejecuta el setter y los effects dependientes se actualizan. Pero si el valor se mantiene (por ejemplo, sigue siendo false), el effect asociado no se vuelve a ejecutar.
¿Cómo se visualiza el flujo interno del memo?
El diagrama del memo muestra su estructura con claridad [4:04]:
- El signal almacena el valor computado por la función del memo.
- El effect se encarga de ejecutar la función, obtener el último valor y compararlo con el previo.
- Si hay diferencia, el setter actualiza el signal y notifica a todos los suscriptores.
- Si no hay diferencia, el flujo se detiene ahí.
Este patrón de comparación antes de actualizar es lo que convierte al memo en una herramienta de optimización real dentro del sistema reactivo [4:48].
¿Por qué la composición de primitivas es tan relevante?
Una de las ideas más importantes es que las primitivas reactivas están diseñadas para componerse entre sí [5:22]. Los signals son funciones, los effects son funciones que consumen signals, y los memos combinan ambos. Esta arquitectura basada en composición permite que:
- Un memo contenga signals que a su vez dependen de otros signals.
- Un effect observe el valor de un memo como si fuera cualquier signal.
- Las cadenas de dependencias se resuelvan automáticamente sin intervención manual.
Librerías como Solid aplican exactamente este principio: signals, effects y memos son las tres primitivas fundamentales, y el resto de funcionalidades se construye a partir de ellas [5:42]. Entender cómo interactúan te da la base para comprender cualquier sistema reactivo moderno y cómo las interfaces de usuario se actualizan de forma automática y eficiente.
Si ya implementaste signals y effects, el memo completa el trío esencial. ¿Qué otra optimización crees que podrías construir combinando estas primitivas?
