✅ What is useCallback Hook in React?

The useCallback hook in React is used to memoize (cache) functions so that their reference stays the same between renders unless one of their dependencies changes. This is especially useful when passing callbacks to child components, as it helps prevent unnecessary re-renders and avoids repeated execution of effects caused by changing function references.

In React, every render creates new function instances. Even if the logic is the same, the function reference changes. When such functions are passed as props to child components (including those wrapped with React.memo), React treats them as changed props and re-renders the child. useCallback solves this problem by returning a stable function reference.

🚀 Syntax

const memoizedCallback = useCallback(
  () => {
    // callback logic
  },
  [dependencies]
);

The callback function is recreated only when one of the dependencies changes.

🧠 Key Concepts

Memoization ensures the same function reference is reused across renders
Dependencies decide when the function should be recreated
Function identity matters when functions are passed as props or used in effects

🔧 Example 1: Without useCallback (Unnecessary Child Re-renders)

import React, { useState } from "react";

const CounterButton = React.memo(function CounterButton({ onIncrement }) {
  console.log("Child rendered");
  return <button onClick={onIncrement}>+1</button>;
});

export default function App() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState("");

  const handleIncrement = () => setCount(c => c + 1);

  return (
    <>
      <h1>Count: {count}</h1>
      <CounterButton onIncrement={handleIncrement} />
      <input value={text} onChange={e => setText(e.target.value)} />
    </>
  );
}

Here, typing in the input causes App to re-render, which creates a new handleIncrement function every time. Because the function reference changes, CounterButton re-renders even though it doesn’t need to.

🔄 Example 2: With useCallback (Stable Function Reference)

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

const CounterButton = React.memo(function CounterButton({ onIncrement }) {
  console.log("Child rendered");
  return <button onClick={onIncrement}>+1</button>;
});

export default function App() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState("");

  const handleIncrement = useCallback(() => {
    setCount(c => c + 1);
  }, []);

  return (
    <>
      <h1>Count: {count}</h1>
      <CounterButton onIncrement={handleIncrement} />
      <input value={text} onChange={e => setText(e.target.value)} />
    </>
  );
}

Now the handleIncrement function keeps the same reference across renders. As a result, CounterButton only re-renders when it actually needs to.

🔍 Example 3: Debounced Search Handler

import React, { useCallback, useRef, useState } from "react";

export default function SearchBox() {
  const [query, setQuery] = useState("");
  const timerRef = useRef(null);

  const handleChange = useCallback((e) => {
    const value = e.target.value;
    setQuery(value);

    if (timerRef.current) clearTimeout(timerRef.current);

    timerRef.current = setTimeout(() => {
      console.log("Searching for:", value);
    }, 400);
  }, []);

  return <input value={query} onChange={handleChange} placeholder="Search..." />;
}

Using useCallback here ensures the handler remains stable, which is important when working with timers, debouncing, or throttling logic.

✅ Best Practices for useCallback

Use useCallback when passing callbacks to React.memo components
Always include all required dependencies in the dependency array
Prefer functional state updates to avoid stale closures
Avoid overusing it; unnecessary memoization can add complexity

📌 Common Use Cases

Optimizing performance with memoized child components
Stable event handlers passed as props
Debounced or throttled input handlers
Callbacks used inside custom hooks or effects

📚 useCallback vs useMemo

useMemo memoizes a computed value
useCallback memoizes a function reference

In fact, useCallback(fn, deps) is equivalent to useMemo(() => fn, deps).

🧾 Conclusion

The useCallback hook is a powerful performance optimization tool that helps maintain a stable function identity across renders. While it should not be applied blindly, it becomes essential when working with React.memo, dependency-sensitive hooks, or debounced logic. Used correctly, useCallback reduces unnecessary renders and keeps React applications efficient and predictable.

Understanding useCallback Hook in React