useCallback: the use that pays and the noise

useCallback returns the same function between two renders as long as the dependencies do not change. It pays when that identity is an effect dependency or a prop of a memoised child; everywhere else it is noise.

What changes and what does not

The function does not get faster: only its identity changes. React compares the reference with the previous render and reuses the old one when the dependencies match. The body still runs on every call, exactly as before.

The three cases where it pays

• Effect dependency: a stable function avoids resubscribing or restarting a timer on every render.
• Prop of a memoised component: without a stable identity the comparison fails and the memo does nothing.
• Dependency of another hook: useMemo and useCallback chain together, and an unstable identity spreads the recomputation.

The real case: a debounced search

function Search({ onQuery }) {
  const [input, setInput] = useState("");

  const commit = useCallback((value) => onQuery(value), [onQuery]);

  useEffect(() => {
    const id = setTimeout(() => commit(input), 250);
    return () => clearTimeout(id);
  }, [input, commit]);

  return (
     setInput(event.target.value)} />
  );
}

Without useCallback, commit would be a new function on every render and the effect would restart on every keystroke, clearing the timer before it fires. With a stable dependency the timer starts once per typed value.

The noise

Wrapping every handler in useCallback with empty dependencies adds a list to maintain and hides the variables the function reads: when the body uses input without declaring it, the value stays stuck at the first render. The gain is zero until something compares that identity.

Checking the dependencies

npm install --save-dev eslint eslint-plugin-react-hooks
npx eslint src

The plugin's react-hooks/exhaustive-deps rule, under the MIT licence, lists the missing dependencies; it is a warning, not an automatic fix. Sometimes the right answer is to drop the useCallback, not to add the dependency.

Live records in the catalogue

A concrete case is filters, where change handlers pass down to child components, and expandable-tabs, where the tab change callback crosses a memoised component. The rest sits among the 111,985 components and the 1,556 blocks.

The limitation

useCallback does not reduce the browser's work: when the child is not memoised and the identity never lands in a dependency array, the function is recreated and compared for no gain. The cost is one more dependency list to keep correct by hand.

Where to continue

The component that benefits from a stable function is in React.memo; the rules the linter enforces are in rules of hooks; the comparison with the other widely used framework is in Vue 3 vs React.