React useCallback Hook (original) (raw)

Last Updated : 08 Feb, 2025

The useCallback Hook is a built-in React Hook that memoizes a callback function, preventing it from being recreated on every render unless its dependencies change. This is useful for optimizing performance, especially when passing functions as props to child components.

**Syntax

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

• The function to be memoized is passed as a parameter to useCallback.
• An array of dependencies determines when the function should be recreated.

**Now let's see the actual difference the useCallback hook causes

**Without the useCallback Hook

This example creates a counter app without using the **useCallback Hook.

JavaScript `

import React, { useState } from "react";

const funcSet = new Set();

const App = () => { const [cnt, setCnt] = useState(0); const [num, setNum] = useState(0);

const incCnt = () => setCnt(cnt + 1);
const decCnt = () => setCnt(cnt - 1);
const incNum = () => setNum(num + 1);

funcSet.add(incCnt);
funcSet.add(decCnt);
funcSet.add(incNum);
alert(funcSet.size);

return (
    <div>
        <h2>Without useCallback Hook</h2>
        <button onClick={incCnt}>Increase Counter</button>
        <button onClick={decCnt}>Decrease Counter</button>
        <button onClick={incNum}>Increase Number</button>
    </div>
);

};

export default App;

`

**In this example

• useState manages cnt and num states.
• Functions update cnt and num values.
• Functions are stored in a Set, which only keeps unique values.
• Clicking a button updates the state and displays the function count in an alert.

The issue here is that every time the component re-renders, new function references are created, causing unnecessary re-renders of child components and inefficient memory usage.

**Using useCallback Hook

To solve this problem, we can use the useCallback hook. The useCallback hook is essential for optimizing performance in React applications, especially when passing callbacks to child components.

JavaScript `

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

const funcSet = new Set();

const App = () => { const [cnt, setCnt] = useState(0); const [num, setNum] = useState(0);

const incCnt = useCallback(() => setCnt(cnt + 1), [cnt]);
const decCnt = useCallback(() => setCnt(cnt - 1), [cnt]);
const incNum = useCallback(() => setNum(num + 1), [num]);

funcSet.add(incCnt);
funcSet.add(decCnt);
funcSet.add(incNum);
alert(funcSet.size);

return (
    <div>
        <h2>With useCallback Hook</h2>
        <button onClick={incCnt}>Increase Counter</button>
        <button onClick={decCnt}>Decrease Counter</button>
        <button onClick={incNum}>Increase Number</button>
    </div>
);

};

export default App;

`

**In this example

• useState manages cnt and num states.
• useCallback memoizes incCnt, decCnt, and incNum to prevent unnecessary function re-creations.
• Functions update cnt and num when called.
• The funcSet keeps track of unique function references.
• Clicking a button updates the corresponding state and displays the function count in an alert.

**Output

When to Use useCallback?

You should use useCallback when

• Passing functions as props to child components to prevent unnecessary re-renders.
• Avoiding unnecessary function re-creations inside useEffect or event handlers.
• Ensuring function references remain stable across renders.

However, avoid overusing useCallback, as it adds an extra layer of complexity and can sometimes lead to premature optimizations.

useCallback vs useMemo

The useCallback and useMemo Hooks are similar, but they serve different purposes:

• useCallback returns a memoized function, ensuring its reference remains stable across renders.
• useMemo returns a memoized value, optimizing expensive calculations by caching the result.
• Use useCallback for passing stable function references, and useMemo for optimizing computations.

Performance Considerations

Using useCallback correctly can enhance performance, but excessive use may introduce unnecessary complexity. Here are some best practices:

1. **Use it for expensive function recreations: Especially for passing stable function references.
2. **Avoid unnecessary usage: If a function is recreated but doesn't cause performance issues, useCallback may not be needed.
3. **Optimize interactions between parent and child components: Helps prevent unnecessary re-renders.
4. **Measure before optimizing: Use React DevTools to analyze performance before applying useCallback.