When will you use this?

Reach for hooks whenever the screen must react to user input, time, or data from an API.

• Hooks power live search, dark mode toggles, and fetching data when a page opens.
• Almost every React job posting mentions hooks — this is core daily work.

Real-world: memoized product grid rows

Amazon product grid wraps each row in React.memo. Parent passes onSelect callback — useCallback keeps function identity stable so memoized rows skip useless re-renders.

Production-style code

const ProductRow = React.memo(function ProductRow({ product, onSelect }) {
  return (
    <tr onClick={() => onSelect(product.id)}>
      <td>{product.title}</td>
      <td>{product.stock}</td>
    </tr>
  );
});

function ProductTable({ products, selectedId, onSelectId }) {
  const handleSelect = useCallback((id) => {
    onSelectId(id);
  }, [onSelectId]);

  return (
    <table>
      <tbody>
        {products.map(p => (
          <ProductRow key={p.id} product={p} onSelect={handleSelect} />
        ))}
      </tbody>
    </table>
  );
}

What happens in production: Scrolling a 5,000-row admin table stays at 60fps because unchanged rows do not re-render when unrelated parent state changes.

Lesson example (start here)

Copy this smaller example first. Once it works, compare it with the real-world code above.

import { useCallback, memo } from 'react';

const Row = memo(function Row({ item, onSelect }) {
  return <tr onClick={() => onSelect(item.id)}><td>{item.name}</td></tr>;
});

function Table({ items }) {
  const handleSelect = useCallback((id) => {
    console.log('Selected', id);
  }, []);
  return items.map(i => <Row key={i.id} item={i} onSelect={handleSelect} />);
}

Line-by-line walkthrough

How it works (big picture)

• handleSelect keeps the same reference so memoized Row avoids useless update the screens.
• Empty deps [] if it does not use changing values.

Do this on your computer

1. Use React DevTools to see why a child update the screens.
2. Wrap stable callbacks with useCallback.
3. Only optimize after confirming it helps.
4. Read the real-world section and name which part of the app uses this topic.
5. Run the example locally and confirm the same behavior in the browser.
6. Change one value in the example (text, initial state, or URL) and predict what will happen before you save.

Experiments — try changing this

• Change text or labels in the example and save — watch the browser update.
• Break the code on purpose (remove a bracket), read the error message, then fix it.
• Add one more item to the array in the example and confirm it appears in the list.
• Open React DevTools (browser extension) while running useCallback and inspect component props/state.

Remember

useCallback(fn, deps) stabilizes function identity. Pair with React.memo on children when needed.

Common questions