📝 useMemo: optimización de cálculos en componentes React

📝 useMemo en React: optimización de cálculos en componentes

El Hook useMemo permite memorizar el resultado de cálculos costosos en React, evitando que se recalculen en cada renderizado si sus dependencias no han cambiado. Esto mejora el rendimiento en componentes que realizan operaciones complejas.

---

1️⃣ Sintaxis básica de useMemo

const valorMemorizado = useMemo(() => {
  // cálculo costoso
  return resultado;
}, [dependencias]);
  

Donde dependencias son los valores que, al cambiar, harán que el cálculo se vuelva a ejecutar.

---

2️⃣ Ejemplo práctico: cálculo de factorial

import { useState, useMemo } from "react";

function Factorial() {
  const [numero, setNumero] = useState(5);
  const [contador, setContador] = useState(0);

  const factorial = useMemo(() => {
    console.log("Calculando factorial...");
    const calcular = n => (n <= 1 ? 1 : n * calcular(n - 1));
    return calcular(numero);
  }, [numero]);

  return (
    <div>
      <h2>Factorial de {numero}: {factorial}</h2>
      <input type="number" value={numero} onChange={e => setNumero(parseInt(e.target.value))} />
      <button onClick={() => setContador(c => c + 1)>Incrementar contador ({contador})</button>
    </div>
  );
}

export default Factorial;

Ejemplo visual de useMemo

Factorial: 120

---

3️⃣ Cuándo usar useMemo

• ⚡ Para cálculos pesados que dependen de valores específicos.
• 🧠 Para evitar recomputaciones innecesarias en renderizados frecuentes.
• 📦 Útil en listas grandes, filtrados, búsquedas o cálculos matemáticos complejos.

---

4️⃣ Ejemplo avanzado: lista filtrada memorizada

import { useState, useMemo } from "react";

function ListaFiltrada({ items }) {
  const [filtro, setFiltro] = useState("");

  const itemsFiltrados = useMemo(() => {
    console.log("Filtrando lista...");
    return items.filter(item => item.toLowerCase().includes(filtro.toLowerCase()));
  }, [items, filtro]);

  return (
    <div>
      <input type="text" value={filtro} onChange={e => setFiltro(e.target.value)} placeholder="Buscar..." />
      <ul>
        {itemsFiltrados.map((item, index) => <li key={index}>{item}</li>)}
      </ul>
    </div>
  );
}

export default ListaFiltrada;
  

---

5️⃣ Resumen

• 📝 useMemo memoriza resultados de cálculos costosos.
• ⚡ Mejora el rendimiento evitando recomputaciones innecesarias.
• ✅ Ideal para listas grandes, filtrados y operaciones pesadas dentro de componentes.

← Volver al índice