What is the purpose of the useCallback hook?

React Beginner Questions - Set 3

It keeps the same function identity between renders — useful only when that identity is being compared somewhere.

Example

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

const Button = memo(function Button({ onClick, children }) {
  return <button onClick={onClick}>{children}</button>;
});

export default function Counter() {
  const [count, setCount] = useState(0);
  const [other, setOther] = useState(0);

  const increment = useCallback(() => setCount(c => c + 1), []);

  return (
    <>
      <Button onClick={increment}>+1 ({count})</Button>
      <button onClick={() => setOther(o => o + 1)}>unrelated {other}</button>
    </>
  );
}

What to notice

Without `useCallback`, `increment` is a new function each render and `memo` on `Button` does nothing.
An empty dependency array means the closure captures the first render's values — include what you read.
Using it everywhere costs memory and buys nothing; only memoised children or effect dependencies need it.

← Back to the question list