React useCallback Hook

⚡ React `useCallback` Hook

The useCallback Hook is used to memoize functions in React so that they don’t get recreated on every render.
It is mainly used for performance optimization, especially when passing functions to child components that rely on referential equality (like React.memo).

🧠 Why `useCallback`?

In React, every render recreates functions:

handleClick is recreated on every render.
If Child is wrapped in React.memo, it still re-renders, because the prop reference changed.

useCallback fixes this by memoizing the function reference.

🛠 Syntax

dependencies – array of values the function depends on.
Function is recreated only when dependencies change.

🧪 Example 1: Basic `useCallback`

import { useState, useCallback } from "react";

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

const increment = useCallback(() => {
setCount((prev) => prev + 1);
}, []); // empty array → function never recreated

return (
<div>
<h2>Count: {count}</h2>
<button onClick={increment}>Increase</button>
</div>
);
}

export default App;

import { useState, useCallback } from "react";

function App() {

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

const increment = useCallback(() => {

setCount((prev) => prev + 1);

}, []); // empty array → function never recreated

return (

<div>

<h2>Count: {count}</h2>

<button onClick={increment}>Increase</button>

</div>

);

}

export default App;

🧪 Example 2: Using `useCallback` with `React.memo`

import { useState, useCallback } from "react";

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

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

// Memoized function prevents Child re-render unless dependencies change
const handleClick = useCallback(() => {
console.log("Button clicked");
}, []);

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

export default Parent;

import { useState, useCallback } from "react";

const Child = React.memo(({ onClick }) => {

console.log("Child rendered");

return <button onClick={onClick}>Click Me</button>;

});

function Parent() {

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

// Memoized function prevents Child re-render unless dependencies change

const handleClick = useCallback(() => {

console.log("Button clicked");

}, []);

return (

<div>

<h2>Count: {count}</h2>

<button onClick={() => setCount(count + 1)}>Increment Count</button>

</div>

);

}

export default Parent;

✅ Without useCallback, Child would re-render every time Parent renders.
✅ With useCallback, Child only re-renders if the function reference changes.

🧪 Example 3: `useCallback` with Dependencies

🧠 Key Notes

Feature	Description
Memoizes function	✔
Reduces unnecessary re-renders	✔
Useful with `React.memo`	✔
Dependencies array required	✔
Does not memoize return value	❌ (use `useMemo` for values)

⚡ Difference Between `useCallback` and `useMemo`

Hook	Memoizes	Returns
`useCallback`	Function	Function reference
`useMemo`	Value	Computed value

🎯 Summary

useCallback prevents unnecessary recreation of functions.
Useful for performance optimization with React.memo.
Always include proper dependencies.
Does not memoize the result — only the function itself.

React useCallback Hook