Give an example of optimization using useCallback in React

Question

Give an example of optimization using useCallback in React.

Answer

When passing functions to child components, React re-creates them on every render.
useCallback ensures the function reference stays the same between renders, avoiding unnecessary child re-renders.

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

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

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

  const handleClick = useCallback(() => {
    console.log('Button clicked!');
  }, []);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <Child onClick={handleClick} />
    </div>
  );
}

✅ The Child component won’t re-render when count changes — only when onClick reference changes.

Real-World Example

• Prevent re-renders in memoized child components
• Optimizing callback-heavy components
• Managing event handlers in large lists

Quick Practice

Create a parent–child setup where useCallback prevents the child from re-rendering when unrelated state updates.

Summary

Use useCallback to memoize functions and stabilize references passed to child components.