Memoización en React

React es rápido. Por defecto, está diseñado para que no tengáis que preocuparos por el rendimiento en el 90% de los casos.

Sin embargo, cuando las aplicaciones crecen, empezamos a notar cierto “lag” al escribir en un input o al abrir un menú. Generalmente, esto se debe a uno de los problemas más habituales de React, los renderizados innecesarios.

Uno de los mecanismos para mejorar esto es la Memoización, una técnica que permite “recordar” resultados anteriores para no tener que volver a calcularlos.

El problema del renderizado en cascada

Para entender la solución, primero hay que entender el problema. En React, cuando un componente padre se renderiza (porque cambió su estado), todos sus hijos se renderizan también recursivamente, hayan cambiado sus props o no.

Imaginad esto:

Esto es una locura ineficiente. Aquí es donde entran nuestras tres herramientas de optimización.

Protegiendo componentes React.memo

React.memo es un Higher-Order Component (HOC) que envuelve a vuestro componente. Su función es verificar las props:

La sintaxis es la siguiente,

import { memo, useState } from 'react';

// Componente Hijo (Pesado)
// Al envolverlo en memo, lo protegemos.
const HijoPesado = memo(function Hijo({ texto }) {
  console.log("Renderizando Hijo..."); // Solo saldrá si 'texto' cambia
  return <p>{texto}</p>;
});

export default function Padre() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>
      
      {/* Aunque Padre cambie, 'texto' sigue siendo "Hola", 
          así que HijoPesado NO se renderizará de nuevo. */}
      <HijoPesado texto="Hola" />
    </div>
  );
}

import { useMemo, useState } from 'react';

function ListaFiltrada({ usuarios, busqueda }) {
  // ❌ MAL: Esto se ejecuta en CADA render, ralentizando la app
  // const filtrados = usuarios.filter(u => u.name.includes(busqueda));

  // ✅ BIEN: Solo filtramos si cambia 'usuarios' o 'busqueda'
  const filtrados = useMemo(() => {
    console.log("Filtrando lista gigante...");
    return usuarios.filter(u => u.name.includes(busqueda));
  }, [usuarios, busqueda]);

  return (
    <ul>
      {filtrados.map(u => <li key={u.id}>{u.name}</li>)}
    </ul>
  );
}

Estabilizando funciones con useCallback

Este es el Hook más difícil de entender, porque tiene que ver con la Identidad Referencial de JavaScript.

Cada vez que un componente se renderiza, todas las funciones que hay dentro se crean de nuevo. Son funciones nuevas en direcciones de memoria nuevas.

Vemos el problema. Volvamos a React.memo. Dijimos que solo evita el renderizado si las props no cambian.

function Padre() {
  const [count, setCount] = useState(0);

  // Esta función SE CREA DE NUEVO en cada click
  const handleClick = () => console.log('Click');

  return (
    // ¡React.memo NO funcionará!
    <HijoMemoizado onClick={handleClick} />
  );
}

Para evitarlo useCallback congela la función. Devuelve exactamente la misma instancia de la función entre renderizados, a menos que cambien sus dependencias.

import { useCallback } from 'react';

function Padre() {
  const [count, setCount] = useState(0);

  // ✅ Ahora 'handleClick' es estable. Es siempre la misma referencia en memoria.
  const handleClick = useCallback(() => {
    console.log('Click');
  }, []); // Dependencias vacías = nunca cambia

  return (
    // 😄 Ahora sí: HijoMemoizado recibe la misma prop y NO se renderiza.
    <HijoMemoizado onClick={handleClick} />
  );
}

El coste de la memoización (a.k.a. no lo uses para todo)

Si estas herramientas son tan buenas, ¿por qué no envolver todo en memo y useCallback? Porque la memoización no es gratis.

Si el componente es simple (ej: un <Button>Texto</Button>), cuesta más trabajo comparar las props que renderizar el botón de nuevo.