How Rendering Works and Memoization

A component re-renders when its state changes, its parent re-renders, or a context it uses changes. Re-renders are usually cheap; problems come from expensive computations, huge lists, or unstable props defeating memoization. Measure with the React DevTools Profiler first. React.memo skips re-rendering when props are equal; useMemo caches expensive values; useCallback keeps function identities stable for memoized children. The React Compiler can apply these automatically.

import { memo, useMemo, useCallback, useState } from "react";

const ProductRow = memo(function ProductRow({ product, onSelect }: { product: Product; onSelect: (id: string) => void }) {
  return <li onClick={() => onSelect(product.id)}>{product.name}</li>;
});

export function ProductList({ products }: { products: Product[] }) {
  const [query, setQuery] = useState("");
  const [selected, setSelected] = useState<string | null>(null);

  const visible = useMemo(
    () => products.filter((p) => p.name.toLowerCase().includes(query.toLowerCase())),
    [products, query],
  );
  const onSelect = useCallback((id: string) => setSelected(id), []);

  return (
    <>
      <input value={query} onChange={(e) => setQuery(e.target.value)} />
      <ul>{visible.map((p) => <ProductRow key={p.id} product={p} onSelect={onSelect} />)}</ul>
    </>
  );
}

Common pitfalls

• Wrapping everything in useMemo/useCallback without measuring.
• Passing new object/array literals to memoized children each render.
• Rendering thousands of rows — virtualize instead (TanStack Virtual).

Key points

• Profile before optimizing
• memo + stable props work together
• Virtualize long lists

Further reading: react.dev: memo