useMemo, useCallback & React.memo — Cache values, stabilize references, and skip re-renders

import { memo, useMemo, useCallback, useState } from "react";
 
interface Product {
  id: string;
  name: string;
  price: number;
  category: string;
}
 
// 1. useMemo — cache an expensive computation
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 — stabilize function reference for memoized children
function ProductPage() {
  const [selected, setSelected] = useState<string | null>(null);
 
  const handleSelect = useCallback((id: string) => {
    setSelected(id);
  }, []);
 
  return <MemoizedProductGrid onSelect={handleSelect} />;
}
 
// 3. React.memo — skip re-render when props are unchanged
const MemoizedProductGrid = memo(function ProductGrid({
  onSelect,
}: {
  onSelect: (id: string) => void;
}) {
  return <div>{/* expensive grid rendering */}</div>;
});

// ---- BEFORE: No memoization — filtering 10,000 products on every keystroke ----
 
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);
 
  // Recomputed on EVERY render, including cart updates (costs ~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>Cart: {cartCount}</header>
      <input value={search} onChange={(e) => setSearch(e.target.value)} />
      <button onClick={() => setSortBy(sortBy === "price" ? "name" : "price")}>
        Sort by {sortBy === "price" ? "name" : "price"}
      </button>
      <button onClick={() => setCartCount((c) => c + 1)}>Add to cart</button>
      <ul>
        {results.map((p) => (
          <ProductRow
            key={p.id}
            product={p}
            onAddToCart={() => setCartCount((c) => c + 1)} // New fn every render
          />
        ))}
      </ul>
    </div>
  );
}
 
function ProductRow({
  product,
  onAddToCart,
}: {
  product: Product;
  onAddToCart: () => void;
}) {
  return (
    <li>
      {product.name} — ${product.price}
      <button onClick={onAddToCart}>Add</button>
    </li>
  );
}
 
// ---- AFTER: Memoized — filtering only runs when search or sortBy changes ----
 
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);
 
  // Only recomputes when search, sortBy, or products change (~45ms saved on cart clicks)
  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>Cart: {cartCount}</header>
      <input value={search} onChange={(e) => setSearch(e.target.value)} />
      <button onClick={() => setSortBy(sortBy === "price" ? "name" : "price")}>
        Sort by {sortBy === "price" ? "name" : "price"}
      </button>
      <button onClick={handleAddToCart}>Add to cart</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}>Add</button>
    </li>
  );
});

// Without useMemo: new array reference triggers useEffect in child
function Parent() {
  const config = { theme: "dark", locale: "en" }; // New object every render
 
  return <Dashboard config={config} />;
}
 
// With useMemo: stable reference prevents unnecessary effect runs
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>{/* expensive chart render */}</canvas>;
  },
  (prev, next) => {
    // Skip re-render if array length and title are the same
    return prev.data.length === next.data.length && prev.title === next.title;
  }
);

// BAD: memoizing a trivial computation
const greeting = useMemo(() => `Hello, ${name}!`, [name]);
 
// GOOD: just compute it — string concatenation is near-instant
const greeting = `Hello, ${name}!`;
 
// BAD: memoizing a primitive that never changes reference
const TAX_RATE = useMemo(() => 0.08, []);
 
// GOOD: just use a constant
const TAX_RATE = 0.08;

// Production example: SavePointCheckbox with custom memo comparison
// File: 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="Save this point"
      />
    );
  },
  (prev, next) => {
    // Custom comparison: ignore callback identity, compare only data props
    return prev.pointId === next.pointId && prev.isSaved === next.isSaved;
  }
);

// Production example: Quiz hook with memoized return value
// File: 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]);
}