useCallback Hook

useCallback returns the same function instance between renders unless dependencies change. Useful when passing callbacks to memoized child components.

useCallback — stable function reference

useCallback returns the same function instance between renders unless dependencies change. Useful when passing callbacks to memoized child components.

Real-life example: useCallback is saving a contact number — same number card in your phone unless your friend changes their number (dependency).

Stable callback for memoized child

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

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

function List({ items }) {
  const [filter, setFilter] = useState("");

  const handleSelect = useCallback((id) => {
    console.log("Selected", id);
  }, []);

  return (
    <>
      <input value={filter} onChange={(e) => setFilter(e.target.value)} />
      <ul>
        {items.map((item) => (
          <Row key={item.id} item={item} onSelect={handleSelect} />
        ))}
      </ul>
    </>
  );
}

Do not overuse useCallback

Most apps do not need useCallback on every handler. Add it when Profiler shows unnecessary child re-renders.

Real-life example: useCallback is premium packaging — helpful for fragile items, wasteful for every grocery bag.

React Compiler (lesson 24) may reduce manual useCallback in the future. Learn the concept; optimize when you measure a problem.