Optimización de Componentes en React con Memoización

Curso de Next.js: Optimización y Manejo de Grandes Datasets

Contenido del curso

Introducción

1
Optimización de JavaScript con Grandes Datasets en Next.js
02:49 min

Throttling y Debouncing

Cache en memoria

Memoización

Scrolling

9
Optimización de Scroll con ReactWindow y Intersection Observer
04:03 min

Conclusiones

10
Optimización de Rendimiento en React con Throttling y Debouncing
01:18 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:005:33

Optimización de Componentes en React con Memoización

Curso de Next.js: Optimización y Manejo de Grandes Datasets

Clase 7 de 10

Clase 7 / 10

Recursos

¿Qué es la memoización y por qué es esencial en aplicaciones reales?

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.

¿Cómo identificar la necesidad de memoización en aplicaciones?

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.

¿Cómo funciona la memoización en JavaScript?

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)

¿Cuál es la diferencia entre memoización y caché?

Aunque la memoización y el caché pueden parecer conceptos similares porque ambos almacenan resultados para mejorar el rendimiento, existen diferencias clave:

Memoización: Almacena el resultado de una función para entradas específicas. Solo guarda el valor para la última entrada determinada.
Caché: Generalmente guarda múltiples resultados y se usa para almacenar cualquier tipo de datos a un nivel más global, no necesariamente atado a la entrada de una función.

¿Cómo implementa React la memoización?

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.

Resumen

¿Qué es la memoización y por qué es esencial en aplicaciones reales?

¿Cómo identificar la necesidad de memoización en aplicaciones?

¿Cómo funciona la memoización 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)

¿Cuál es la diferencia entre memoización y caché?

Aunque la memoización y el caché pueden parecer conceptos similares porque ambos almacenan resultados para mejorar el rendimiento, existen diferencias clave:

Memoización: Almacena el resultado de una función para entradas específicas. Solo guarda el valor para la última entrada determinada.
Caché: Generalmente guarda múltiples resultados y se usa para almacenar cualquier tipo de datos a un nivel más global, no necesariamente atado a la entrada de una función.

¿Cómo implementa React la memoización?

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.

Introducción

Optimización de JavaScript con Grandes Datasets en Next.js

Throttling y Debouncing

Optimización de Búsquedas con Throttle y Debounce en Next.js

Implementación de Debounce en React con Hooks y JavaScript

Optimización de Debounce y Throttle en React con LowDash

Cache en memoria

Optimización de Caché en Aplicaciones React con ReactQuery y SWR

Optimización de búsqueda en JavaScript: Arrays vs. Objetos

Memoización

Optimización de Componentes en React con Memoización

Optimización de Componentes con React.memo y React.useMemo

Scrolling

Optimización de Scroll con ReactWindow y Intersection Observer

Conclusiones

Optimización de Rendimiento en React con Throttling y Debouncing

Optimización de Componentes en React con Memoización

Progreso del curso

Introducción

Throttling y Debouncing

Cache en memoria

Memoización

Scrolling

Conclusiones

Recursos

Recursos