¿Memoización? 🤔
Memorización 😬
Introducción
¿Cuándo optimizar el código?
Throttling y Debouncing
Analizando nuestra página de búsqueda
Nuestro propio hook debouncer: useDebouncer
Throttling y Debouncing con Lodash en React
Cache en memoria
Asincronía, cache y re-validación de recursos HTTP
Hashmaps vs. arrays
Memoización
Identificando re-renders problemáticos
Memoization en React
Scrolling
Patrón Windowing
Conclusiones
Próximos pasos
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
La memoización es una técnica de optimización comúnmente utilizada en desarrollo de software para mejorar el rendimiento de las aplicaciones, especialmente en aquellas que manejan grandes volúmenes de datos o requieren altas prestaciones. En el contexto de aplicaciones web, la memoización ayuda a reducir los cálculos innecesarios al almacenar en caché el resultado de funciones, evitando que se recalculen con los mismos valores de entrada.
Al desarrollar una aplicación, especialmente una que incluye características como paginación o scrolleo infinito, es crucial observar el comportamiento de los componentes React al realizar acciones comunes como buscar o cargar más resultados. Si observa que al realizar estas acciones, cada componente se vuelve a renderizar innecesariamente, esto indica que podrías beneficiarte al implementar memoización para optimizar el rendimiento.
Por ejemplo, en una página de búsqueda, al buscar un término y luego cargar más resultados, idealmente sólo los nuevos elementos deberían renderizarse. Si todos los componentes se vuelven a renderizar, esto afecta negativamente el rendimiento.
La memoización se centra en el almacenamiento y reutilización de resultados de funciones anteriores cuando los mismos argumentos se presentan nuevamente. Se podría describir de la siguiente manera en JavaScript:
function memoize(fn) {
const cache = {};
return function(...args) {
const argsKey = JSON.stringify(args);
if (!cache[argsKey]) {
cache[argsKey] = fn.apply(this, args);
}
return cache[argsKey];
};
}
const expensiveFunction = (num) => {
console.log("Calculando...");
return num * num;
};
const memoizedFunction = memoize(expensiveFunction);
console.log(memoizedFunction(5)); // Calculando... 25
console.log(memoizedFunction(5)); // 25 (cacheado)
Aunque la memoización y el caché pueden parecer conceptos similares porque ambos almacenan resultados para mejorar el rendimiento, existen diferencias clave:
El equipo de React ha integrado memoización en su API para lograr un mejor rendimiento al renderizar componentes. Utilizar memoization es especialmente útil cuando trabajas con listas que cambian frecuentemente debido a búsquedas, filtrados o paginación. Esto ayuda a asegurar que el performance de una página sea óptimo, especialmente cuando se nota que el scroll de una página es lento o desincronizado.
React ofrece la función React.memo
para memoizar componentes funcionales, evitando re-renderizados innecesarios si las props no cambian:
import React from 'react';
const MyComponent = React.memo(function MyComponent({ value }) {
// Componente funcional
return <div>{value}</div>;
});
La implementación de memoización en componentes puede significativamente optimizar las aplicaciones, mejorando la experiencia del usuario y reduciendo el costo computacional.
Estas técnicas no solo son útiles en el desarrollo con React, sino que se pueden aplicar a otros frameworks y lenguajes, haciendo que la memoización sea una herramienta indispensable para los desarrolladores modernos que buscan eficiencia y rendimiento.
Aportes 2
Preguntas 0
¿Memoización? 🤔
Memorización 😬
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?