When to Use useCallback in React: Simple Guide

Use useCallback in React to memoize functions so they keep the same identity between renders. This helps prevent unnecessary re-renders of child components that rely on those functions as props.

How It Works

Imagine you have a friend who always brings the same gift every time you meet. You recognize the gift immediately and don’t get excited to open it again. In React, functions passed as props are like gifts. Without useCallback, React creates a new function every time your component renders, making child components think they got a new gift and causing them to re-render.

useCallback helps by remembering the function you created last time and giving you the same one again, as long as its dependencies haven’t changed. This way, React sees the same function and avoids unnecessary work, making your app faster and smoother.

Example

This example shows a parent component passing a callback to a child. Without useCallback, the child re-renders every time the parent renders. With useCallback, the child only re-renders when needed.

react

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

const Child = memo(({ onClick }) => {
  console.log('Child rendered');
  return <button onClick={onClick}>Click me</button>;
});

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

  // Without useCallback, this function is recreated on every render
  // const handleClick = () => setCount(c => c + 1);

  // With useCallback, the function is memoized
  const handleClick = useCallback(() => {
    setCount(c => c + 1);
  }, []);

  console.log('Parent rendered');

  return (
    <div>
      <p>Count: {count}</p>
      <Child onClick={handleClick} />
    </div>
  );
}

Output

Parent rendered
Child rendered

(Clicking the button increments count and re-renders Child only when handleClick changes)

When to Use

Use useCallback when you pass functions to child components that rely on reference equality to avoid re-rendering, such as components wrapped in React.memo. It is especially useful when the child components are expensive to render or when you want to optimize performance.

For example, if you have a list of items with buttons that trigger actions, memoizing the click handlers with useCallback prevents unnecessary updates to each list item.

However, avoid overusing useCallback for every function, as it adds complexity and memory overhead. Use it only when you notice performance issues or when child components depend on stable function references.

Key Points

• useCallback memoizes functions to keep the same reference between renders.
• It helps prevent unnecessary re-renders of child components receiving functions as props.
• Use it with React.memo or other memoization techniques for best effect.
• Don't use it everywhere; only when performance matters or child components rely on stable function references.
• Remember to include dependencies correctly to avoid stale closures.

Key Takeaways

Use useCallback to memoize functions passed as props to avoid unnecessary child re-renders.

It works best with React.memo to optimize component rendering.

Only use useCallback when performance issues arise or stable function references are needed.

Always include correct dependencies to keep functions up to date.

Avoid overusing useCallback to keep code simple and readable.