Contenido del curso
Memos y Signals Derivados en Solid para Optimizar Actualizaciones
¿Qué son los memos y los signals derivados en Solid?
¡Hola! En este artículo vamos a sumergirnos en el mundo de Solid y su tercera primitiva reactiva: los memos. Pero para comprender completamente los memos, primero debemos explorar los signals derivados y cómo estos optimizan el sistema de actualizaciones en Solid.
¿Cómo funcionan los memos?
Los memos son una forma avanzada de signals en Solid. Permiten memorizar un estado y ejecutar efectos solo cuando realmente hay un cambio en el valor. Esto se logra con la función createMemo.
import { createMemo } from 'solid-js'; const doubleCount = createMemo(() => count() * 2);
En este ejemplo, doubleCount se recalculará solo si el valor count cambia, optimizando así la actualización del DOM y reduciendo cálculos innecesarios.
¿Cómo implementar signals derivados?
Los signals derivados son una técnica en la que se usa un signal base para crear otro más complejo. Solid permite crear, por ejemplo, un signal que calcule si un valor es divisible por tres:
const isDivisibleByThree = () => count() % 3 === 0;
Este signal derivado accede al signal count y utiliza el operador módulo para verificar la divisibilidad.
¿Código optimizado y mantenible?
El uso de memos no solo optimiza el sistema, sino que también mantiene el código claro y mantenible. A continuación, encapsulamos un signal derivado para obtener un memo que cambia su estado solo cuando es necesario:
const memoizedDivisibleByThree = createMemo(() => count() % 3 === 0); // Muestra en consola solo si el valor cambia createEffect(() => { console.log(memoizedDivisibleByThree() ? 'Yes' : 'No'); });
Con el memoizado memoizedDivisibleByThree, Solid solo ejecuta el efecto si el valor realmente cambia, evitando ejecuciones innecesarias y mejorando la eficiencia.
Ventajas de usar memos en Solid
Reducción de cálculos innecesarios: Los memos solo recalculan su valor cuando realmente el signal en cuestión cambia.
Optimización del rendimiento: Al minimizar las re-ejecuciones de efectos, se mejoran la velocidad y la eficiencia de la aplicación.
Código más limpio y mantenible: Al encapsular lógica compleja y redundante, se evita la duplicación de código y se facilita su comprensión.
Ahora que conocemos la importancia de los memos y signals derivados, no solo comprendemos mejor el funcionamiento interno de Solid, sino que también estamos más preparados para escribir código eficiente y óptimo en nuestras aplicaciones. ¡Anímate a seguir explorando estas fascinantes herramientas en tu próximo proyecto!
Jeisson Felipe Rodriguez Prieto
student
Samuel Burbano
teacherLa primitiva reactiva memo 💡
Es una función que te permite crear un valor derivado de otros valores, pero que solo se actualiza cuando alguno de esos valores cambia. 🔗
Es como una fórmula matemática que depende de otras variables pero que solo se recalcula cuando es necesario. 📊
Por ejemplo, si tienes una función memo que suma dos números, y esos números no cambian, la función memo no hará nada. 🧮 Pero si cambias uno de esos números, la función memo volverá a sumarlos y te dará el nuevo resultado. 🔄
La ventaja de usar memo 🚀
Es que puedes optimizar el rendimiento de tu aplicación, evitando cálculos innecesarios o repetitivos. ⏩ Además, puedes usar memo para crear valores reactivos que se sincronicen con otros valores, como el estado de tu aplicación o los datos que recibes de una API. 📡
De hecho, el memo va un poco mas allá, ya que si por ejemplo, un memo tiene los valores: a = 7 y b = 3. En un memo de suma esto nos daría ++10++, efectuaría los cambios en el DOM, etc. Pero si por ejemplo, ambos cambian: a = 8 y b = 2, el valor de esto seria ++10++ igual, el memo esto lo vería como el mismo valor que ya tenia "memorizado" y por ende no mandaría actualizaciones innecesarias a los lugares donde se use el memo.
