React useMemo and useCallback Deep Dive — When, Why, and How to Use Them Right

import React, { useState } from 'react';

// This child is wrapped in React.memo — it SHOULD skip re-renders
// if its props haven't changed. But watch what actually happens.
const ProductTag = React.memo(({ label, onRemove }) => {
  console.log(`ProductTag rendered: "${label}"`);
  return (
    <span>
      {label}
      <button onClick={onRemove}>✕</button>
    </span>
  );
});

export default function ProductList() {
  const [cartCount, setCartCount] = useState(0);
  const [tags] = useState(['React', 'TypeScript', 'Node']);

  // ❌ Problem: this function is recreated on EVERY render of ProductList.
  // Even though its logic never changes, it gets a fresh memory address
  // each time cartCount changes. React.memo on ProductTag is useless here.
  const handleRemove = (tag) => {
    console.log(`Removing tag: ${tag}`);
  };

  return (
    <div>
      {/* Clicking "Add to Cart" triggers a re-render of ProductList.
          That re-render creates a new handleRemove function.
          React.memo sees a new prop reference → re-renders ALL ProductTags.
          Check the console — all three tags log on every cart click. */}
      <button onClick={() => setCartCount(c => c + 1)}>
        Add to Cart ({cartCount})
      </button>

      {tags.map(tag => (
        <ProductTag
          key={tag}
          label={tag}
          onRemove={() => handleRemove(tag)} // new function on every render
        />
      ))}
    </div>
  );
}

import React, { useState, useCallback } from 'react';

const ProductTag = React.memo(({ label, onRemove }) => {
  // This log will now only fire on initial mount, NOT on cart updates.
  console.log(`ProductTag rendered: "${label}"`);
  return (
    <span style={{ marginRight: 8 }}>
      {label}
      <button onClick={onRemove}>✕</button>
    </span>
  );
});

export default function ProductList() {
  const [cartCount, setCartCount] = useState(0);
  const [tags, setTags] = useState(['React', 'TypeScript', 'Node']);

  // ✅ useCallback returns the SAME function reference on every render
  // as long as `tags` (the dependency) hasn't changed.
  // Now React.memo on ProductTag can actually do its job.
  const handleRemove = useCallback(
    (tagToRemove) => {
      // We reference `setTags` here. The setter from useState is guaranteed
      // stable by React, so it doesn't need to be in deps.
      // We use the functional update form to avoid needing `tags` in deps.
      setTags(currentTags => currentTags.filter(t => t !== tagToRemove));
    },
    [] // Empty array: this function never needs to be recreated.
  );

  return (
    <div>
      <button onClick={() => setCartCount(c => c + 1)}>
        Add to Cart ({cartCount})
      </button>

      {tags.map(tag => (
        <ProductTag
          key={tag}
          label={tag}
          // ✅ We still create a new arrow here for the specific tag,
          // but see the tip below for how to handle this pattern cleanly.
          onRemove={() => handleRemove(tag)}
        />
      ))}
    </div>
  );
}

// ─── Cleaner pattern: pass the raw handler + tag ID as separate props ──────
// This way React.memo compares (handleRemove === handleRemove) ✅
// and (tag === tag) ✅ — both stable, no unnecessary renders.
const CleanProductTag = React.memo(({ label, tagId, onRemove }) => {
  console.log(`CleanProductTag rendered: "${label}"`);
  // Bind the tag ID inside the child — the parent stays clean.
  return (
    <span>
      {label}
      <button onClick={() => onRemove(tagId)}>✕</button>
    </span>
  );
});

import React, { useState, useMemo } from 'react';

// Simulate a large product catalogue — 50,000 items.
function generateCatalogue(size) {
  return Array.from({ length: size }, (_, index) => ({
    id: index,
    name: `Product ${index}`,
    category: index % 3 === 0 ? 'Electronics' : index % 3 === 1 ? 'Clothing' : 'Books',
    price: parseFloat((Math.random() * 500).toFixed(2)),
  }));
}

const CATALOGUE = generateCatalogue(50_000); // created once outside component

export default function ProductSearch() {
  const [searchTerm, setSearchTerm] = useState('');
  const [selectedCategory, setSelectedCategory] = useState('All');
  const [wishlistCount, setWishlistCount] = useState(0);

  // ❌ Without useMemo, this filter runs on EVERY render — including
  // when wishlistCount changes, which has nothing to do with products.
  // With 50k items, this is a measurable hit on every wishlist click.

  // ✅ useMemo caches the filtered result. The filter only reruns
  // when searchTerm or selectedCategory actually changes.
  const filteredProducts = useMemo(() => {
    console.time('filter'); // measure in dev to confirm cost

    const results = CATALOGUE.filter(product => {
      const matchesSearch = product.name
        .toLowerCase()
        .includes(searchTerm.toLowerCase());

      const matchesCategory =
        selectedCategory === 'All' || product.category === selectedCategory;

      return matchesSearch && matchesCategory;
    });

    console.timeEnd('filter');
    return results;
  }, [searchTerm, selectedCategory]); // deps: only re-filter when these change

  // ✅ Use case 2: referentially stable object for a memoized child.
  // Without useMemo, this object is new on every render, breaking
  // any React.memo or useEffect that depends on it downstream.
  const filterSummary = useMemo(
    () => ({
      total: filteredProducts.length,
      category: selectedCategory,
      term: searchTerm,
    }),
    [filteredProducts, selectedCategory, searchTerm]
  );

  return (
    <div>
      <input
        type="text"
        placeholder="Search products..."
        value={searchTerm}
        onChange={e => setSearchTerm(e.target.value)}
      />

      <select
        value={selectedCategory}
        onChange={e => setSelectedCategory(e.target.value)}
      >
        {['All', 'Electronics', 'Clothing', 'Books'].map(cat => (
          <option key={cat}>{cat}</option>
        ))}
      </select>

      {/* Changing wishlist count triggers a re-render of ProductSearch,
          but filteredProducts stays cached — filter does NOT rerun. */}
      <button onClick={() => setWishlistCount(c => c + 1)}>
        Wishlist ({wishlistCount})
      </button>

      <p>
        Showing {filterSummary.total} results
        {filterSummary.term && ` for "${filterSummary.term}"`}
        {filterSummary.category !== 'All' && ` in ${filterSummary.category}`}
      </p>

      {/* Only render first 20 for display — you'd use virtualisation in prod */}
      {filteredProducts.slice(0, 20).map(product => (
        <div key={product.id}>
          {product.name} — {product.category} — ${product.price}
        </div>
      ))}
    </div>
  );
}

import React, { useState, useCallback, useMemo, useContext, createContext } from 'react';

// ─── Context setup ────────────────────────────────────────────────────────────
const ShoppingCartContext = createContext(null);

export function ShoppingCartProvider({ children }) {
  const [cartItems, setCartItems] = useState([]);
  const [promoCode, setPromoCode] = useState('');

  const addItem = useCallback((item) => {
    setCartItems(current => [...current, item]);
  }, []); // stable: only uses the setter, no external deps

  const removeItem = useCallback((itemId) => {
    setCartItems(current => current.filter(i => i.id !== itemId));
  }, []);

  const applyPromo = useCallback((code) => {
    setPromoCode(code);
  }, []);

  // ✅ Critical pattern: memoize the context VALUE object.
  // Without this, every render of ShoppingCartProvider creates a new
  // context object reference → ALL consumers re-render, even components
  // that only use `addItem` and haven't seen a cart change.
  const contextValue = useMemo(
    () => ({
      cartItems,    // changes when items are added/removed
      promoCode,    // changes when promo is applied
      addItem,      // stable reference from useCallback
      removeItem,   // stable reference from useCallback
      applyPromo,   // stable reference from useCallback
    }),
    [cartItems, promoCode, addItem, removeItem, applyPromo]
  );

  return (
    <ShoppingCartContext.Provider value={contextValue}>
      {children}
    </ShoppingCartContext.Provider>
  );
}

// ─── Consumer that only needs the addItem action ──────────────────────────────
const AddToCartButton = React.memo(({ productId, productName }) => {
  // This component subscribes to the full context, which is why
  // the memoized context value above is so important.
  // If contextValue changes reference on every render, this re-renders too.
  const { addItem } = useContext(ShoppingCartContext);

  console.log(`AddToCartButton rendered for: ${productName}`);

  return (
    <button onClick={() => addItem({ id: productId, name: productName })}>
      Add {productName} to Cart
    </button>
  );
});

// ─── useRef + useCallback pattern for always-fresh callbacks ──────────────────
// Problem: sometimes you need a stable callback that closes over the LATEST
// state but you don't want to re-create (and re-subscribe) on every state change.
export function SearchBar({ onSearch }) {
  const [inputValue, setInputValue] = useState('');

  // Store the latest onSearch prop in a ref without triggering re-renders.
  const onSearchRef = React.useRef(onSearch);
  // Keep the ref current on every render — this is cheap.
  React.useLayoutEffect(() => {
    onSearchRef.current = onSearch;
  });

  // This callback never changes reference (empty deps),
  // but always calls the latest version of onSearch via the ref.
  const handleSearch = useCallback(() => {
    // onSearchRef.current is always the most recent onSearch prop.
    onSearchRef.current(inputValue);
  }, [inputValue]); // Only recreate when inputValue itself changes.

  return (
    <div>
      <input
        value={inputValue}
        onChange={e => setInputValue(e.target.value)}
        placeholder="Search..."
      />
      <button onClick={handleSearch}>Search</button>
    </div>
  );
}