🔁 useCallback() in React

The useCallback() hook memoizes a function — preventing it from being recreated on every render unless its dependencies change.

🧩 1. Why useCallback?

Without useCallback(), child components receiving functions as props may re-render unnecessarily.

import { useCallback, useState } from 'react';

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

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

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

function Child({ onClick }) {
  console.log('Child rendered');
  return <button onClick={onClick}>Click Me</button>;
}

⚙️ 2. Syntax

const memoizedFn = useCallback(() => {
  // function logic
}, [dependency1, dependency2]);

🚀 3. When to Use

• Passing callbacks to memoized child components
• Preventing unnecessary renders
• Stable function reference across renders

🛑 4. Avoid Overuse

Only use useCallback() when you actually see performance issues. Adding unnecessary hooks can clutter your code.

For memoizing values instead of functions, use useMemo().