useMemo, useCallback & React.memo — Cachea valores, estabiliza referencias y omite re-renderizados

import { memo, useMemo, useCallback, useState } from "react";
 
interface Product {
  id: string;
  name: string;
  price: number;
  category: string;
}
 
// 1. useMemo — cachea un cálculo costoso
function ProductFilter({ products, category }: { products: Product[]; category: string }) {
  const filtered = useMemo(
    () => products.filter((p) => p.category === category).sort((a, b) => a.price - b.price),
    [products, category]
  );
 
  return <ProductList items={filtered} />;
}
 
// 2. useCallback — estabiliza la referencia de función para hijos memoizados
function ProductPage() {
  const [selected, setSelected] = useState<string | null>(null);
 
  const handleSelect = useCallback((id: string) => {
    setSelected(id);
  }, []);
 
  return <MemoizedProductGrid onSelect={handleSelect} />;
}
 
// 3. React.memo — omite re-renderizado cuando los props no cambian
const MemoizedProductGrid = memo(function ProductGrid({
  onSelect,
}: {
  onSelect: (id: string) => void;
}) {
  return <div>{/* renderizado costoso de grid */}</div>;
});

// ---- ANTES: Sin memoización — filtrado de 10,000 productos en cada pulsación de tecla ----
 
function StorePage() {
  const [products] = useState<Product[]>(generateProducts(10_000));
  const [search, setSearch] = useState("");
  const [sortBy, setSortBy] = useState<"price" | "name">("name");
  const [cartCount, setCartCount] = useState(0);
 
  // Recompilado en CADA renderizado, incluyendo actualizaciones del carrito (cuesta ~45ms)
  const results = products
    .filter((p) => p.name.toLowerCase().includes(search.toLowerCase()))
    .sort((a, b) =>
      sortBy === "price" ? a.price - b.price : a.name.localeCompare(b.name)
    );
 
  return (
    <div>
      <header>Carrito: {cartCount}</header>
      <input value={search} onChange={(e) => setSearch(e.target.value)} />
      <button onClick={() => setSortBy(sortBy === "price" ? "name" : "price")}>
        Ordenar por {sortBy === "price" ? "nombre" : "precio"}
      </button>
      <button onClick={() => setCartCount((c) => c + 1)}>Agregar al carrito</button>
      <ul>
        {results.map((p) => (
          <ProductRow
            key={p.id}
            product={p}
            onAddToCart={() => setCartCount((c) => c + 1)} // Nueva función en cada renderizado
          />
        ))}
      </ul>
    </div>
  );
}
 
function ProductRow({
  product,
  onAddToCart,
}: {
  product: Product;
  onAddToCart: () => void;
}) {
  return (
    <li>
      {product.name} — ${product.price}
      <button onClick={onAddToCart}>Agregar</button>
    </li>
  );
}
 
// ---- DESPUÉS: Memoizado — el filtrado solo se ejecuta cuando search o sortBy cambian ----
 
function StorePageOptimized() {
  const [products] = useState<Product[]>(generateProducts(10_000));
  const [search, setSearch] = useState("");
  const [sortBy, setSortBy] = useState<"price" | "name">("name");
  const [cartCount, setCartCount] = useState(0);
 
  // Solo se recomputa cuando search, sortBy o products cambian (~45ms ahorrados en clics de carrito)
  const results = useMemo(
    () =>
      products
        .filter((p) => p.name.toLowerCase().includes(search.toLowerCase()))
        .sort((a, b) =>
          sortBy === "price" ? a.price - b.price : a.name.localeCompare(b.name)
        ),
    [products, search, sortBy]
  );
 
  const handleAddToCart = useCallback(() => {
    setCartCount((c) => c + 1);
  }, []);
 
  return (
    <div>
      <header>Carrito: {cartCount}</header>
      <input value={search} onChange={(e) => setSearch(e.target.value)} />
      <button onClick={() => setSortBy(sortBy === "price" ? "name" : "price")}>
        Ordenar por {sortBy === "price" ? "nombre" : "precio"}
      </button>
      <button onClick={handleAddToCart}>Agregar al carrito</button>
      <ul>
        {results.map((p) => (
          <MemoizedProductRow
            key={p.id}
            product={p}
            onAddToCart={handleAddToCart}
          />
        ))}
      </ul>
    </div>
  );
}
 
const MemoizedProductRow = memo(function ProductRow({
  product,
  onAddToCart,
}: {
  product: Product;
  onAddToCart: () => void;
}) {
  return (
    <li>
      {product.name} — ${product.price}
      <button onClick={onAddToCart}>Agregar</button>
    </li>
  );
});

// Sin useMemo: nueva referencia de array dispara useEffect en hijo
function Parent() {
  const config = { theme: "dark", locale: "en" }; // Nuevo objeto en cada renderizado
 
  return <Dashboard config={config} />;
}
 
// Con useMemo: referencia estable previene ejecuciones de efecto innecesarias
function Parent() {
  const config = useMemo(() => ({ theme: "dark", locale: "en" }), []);
 
  return <Dashboard config={config} />;
}

const ChartWidget = memo(
  function ChartWidget({ data, title }: { data: number[]; title: string }) {
    return <canvas>{/* renderizado costoso de gráfico */}</canvas>;
  },
  (prev, next) => {
    // Omite re-renderizado si la longitud del array y el título son los mismos
    return prev.data.length === next.data.length && prev.title === next.title;
  }
);

// MAL: memoizar un cálculo trivial
const greeting = useMemo(() => `Hello, ${name}!`, [name]);
 
// BIEN: solo calcúlalo — la concatenación de strings es casi instantánea
const greeting = `Hello, ${name}!`;
 
// MAL: memoizar una primitiva que nunca cambia de referencia
const TAX_RATE = useMemo(() => 0.08, []);
 
// BIEN: solo usa una constante
const TAX_RATE = 0.08;

// Ejemplo de producción: SavePointCheckbox con comparación memo personalizada
// Archivo: src/components/study/save-point-checkbox.tsx
'use client';
import React, { memo } from 'react';
 
interface SavePointCheckboxProps {
  pointId: string;
  isSaved: boolean;
  onSavedChange: (pointId: string, isSaved: boolean) => void;
}
 
const SavePointCheckbox = memo(
  function SavePointCheckbox({ pointId, isSaved, onSavedChange }: SavePointCheckboxProps) {
    return (
      <input
        type="checkbox"
        checked={isSaved}
        onChange={(e) => onSavedChange(pointId, e.target.checked)}
        aria-label="Guardar este punto"
      />
    );
  },
  (prev, next) => {
    // Comparación personalizada: ignora la identidad del callback, compara solo props de datos
    return prev.pointId === next.pointId && prev.isSaved === next.isSaved;
  }
);

// Ejemplo de producción: Hook de Quiz con valor de retorno memoizado
// Archivo: src/hooks/use-quiz.ts
import { useState, useMemo, useCallback } from 'react';
 
export function useQuiz(questions: Question[]) {
  const [currentIndex, setCurrentIndex] = useState(0);
  const [answers, setAnswers] = useState<Map<string, string>>(new Map());
 
  const currentQuestion = useMemo(
    () => questions[currentIndex],
    [questions, currentIndex]
  );
 
  const submitAnswer = useCallback(
    (questionId: string, answer: string) => {
      setAnswers((prev) => new Map(prev).set(questionId, answer));
    },
    []
  );
 
  const goToNext = useCallback(() => {
    setCurrentIndex((prev) => Math.min(prev + 1, questions.length - 1));
  }, [questions.length]);
 
  return useMemo(() => ({
    currentQuestion,
    submitAnswer,
    goToNext,
    progress: currentIndex / questions.length,
  }), [currentQuestion, submitAnswer, goToNext, currentIndex, questions.length]);
}