The useCallback Hook is a built-in React Hook used to cache a function definition between re-renders. It helps optimize application performance by maintaining the same function reference until its dependencies change. It is especially useful when passing callback functions to child components that use memo.
Course Link: JustAcademy React JS Training Course
Course Demo: Register for React JS Course Demo
useCallback allows React to reuse a function reference between renders when the specified dependencies have not changed. It is primarily used as a performance optimization when function identity matters.
In JavaScript, defining a function inside a component generally creates a new function whenever the component renders. This can cause a memoized child component to re-render unnecessarily if that function is passed as a prop. The useCallback Hook can help prevent this when its dependencies remain unchanged.
import { useCallback } from 'react';
function App() {
const handleClick = useCallback(() => {
console.log('Button clicked!');
}, []);
return <button onClick={handleClick}>Click Me</button>;
}
export default App;Explanation:
useCallback caches the function definition.useCallback is declared.const cachedFunction = useCallback(functionDefinition, dependencies);Parameters:
| Parameter | Description |
|---|---|
functionDefinition |
The function you want React to cache. |
dependencies |
An array of reactive values used inside the function, such as props, state, and variables declared in the component. |
Return value: React returns the function passed to useCallback on the initial render. On later renders, React returns the cached function if the dependencies have not changed; otherwise, it returns the new function.
Important: useCallback does not automatically make every component faster. Use it when profiling or your component structure shows that a stable function reference is beneficial.
import { useState, memo } from 'react';
const Child = memo(function Child({ onClick }) {
console.log('Child rendered');
return <button onClick={onClick}>Child Button</button>;
});
function App() {
const [count, setCount] = useState(0);
const handleClick = () => {
console.log('Child button clicked');
};
return (
<div>
<h2>Count: {count}</h2>
<button onClick={() => setCount(count + 1)}>Increment</button>
<Child onClick={handleClick} />
</div>
);
}
export default App;Explanation: Every time App renders, it creates a new handleClick function. Because the function reference changes, the memoized Child receives a changed prop and can render again.
import { useState, useCallback, memo } from 'react';
const Child = memo(function Child({ onClick }) {
console.log('Child rendered');
return <button onClick={onClick}>Child Button</button>;
});
function App() {
const [count, setCount] = useState(0);
const handleClick = useCallback(() => {
console.log('Child button clicked');
}, []);
return (
<div>
<h2>Count: {count}</h2>
<button onClick={() => setCount(count + 1)}>Increment</button>
<Child onClick={handleClick} />
</div>
);
}
export default App;Explanation: The handleClick reference remains stable while its dependencies stay unchanged. Because Child is wrapped in memo and its other props remain unchanged, React can skip rendering it when the counter changes.
Remember: useCallback alone does not prevent a child component from rendering. It is most useful here because it works together with memo.
The dependency array tells React which reactive values the function uses. React compares each dependency with its previous value using Object.is.
import { useState, useCallback } from 'react';
function App() {
const [name, setName] = useState('Rahul');
const greet = useCallback(() => {
console.log('Hello ' + name);
}, [name]);
return (
<div>
<h2>Name: {name}</h2>
<button onClick={() => setName('Amit')}>Change Name</button>
<button onClick={greet}>Greet</button>
</div>
);
}
export default App;Explanation: The greet function uses the name state, so name must be included in the dependency array. When the name changes, React creates and returns an updated function that uses the new name.
| Dependency | Behavior | Example |
|---|---|---|
| Empty array | Reuses the cached function while the cache remains valid. | useCallback(fn, []) |
| With dependencies | Returns the cached function until a dependency changes. | useCallback(fn, [name]) |
| Array omitted | Returns a new function on every render, so caching is not achieved. | useCallback(fn) |
You can use useCallback with useState to create stable event handlers that update state.
import { useState, useCallback } from 'react';
function Counter() {
const [count, setCount] = useState(0);
const increment = useCallback(() => {
setCount(previousCount => previousCount + 1);
}, []);
return (
<div>
<h2>Count: {count}</h2>
<button onClick={increment}>Increment</button>
</div>
);
}
export default Counter;Explanation: The updater function receives the previous state and calculates the next value. Since the callback does not read count directly, it does not need count in its dependency array.
Event handlers perform actions such as submitting forms, clicking buttons, deleting items, or updating lists. When a handler is passed to a memoized child component, useCallback can help keep its reference stable.
import { useCallback } from 'react';
function App() {
const handleClick = useCallback(() => {
alert('Welcome to React JS!');
}, []);
return <button onClick={handleClick}>Click Here</button>;
}
export default App;Explanation: The callback displays an alert when the button is clicked. Its function reference can be reused across renders while its dependencies remain unchanged.
useCallback can be used to maintain a stable form submission handler, especially when the handler is passed to a memoized child component.
import { useState, useCallback } from 'react';
function ContactForm() {
const [email, setEmail] = useState('');
const handleSubmit = useCallback((event) => {
event.preventDefault();
alert('Submitted email: ' + email);
}, [email]);
return (
<form onSubmit={handleSubmit}>
<input
type="email"
value={email}
onChange={event => setEmail(event.target.value)}
placeholder="Enter email"
required
/>
<button type="submit">Submit</button>
</form>
);
}
export default ContactForm;Explanation: The handler prevents the browser's default form submission and displays the email entered by the user. Because it reads email, the dependency array includes email.
Both Hooks are used for memoization, but they cache different things.
| Feature | useCallback | useMemo |
|---|---|---|
| Purpose | Caches a function definition. | Caches the result of a calculation. |
| Returns | A function. | A calculated value. |
| Common use | Stable callbacks passed to memoized components. | Expensive calculations or stable object/value references. |
| Example | useCallback(() => doWork(), []) |
useMemo(() => calculate(), []) |
const handleClick = useCallback(() => {
console.log('Clicked');
}, []);
const total = useMemo(() => {
return price * quantity;
}, [price, quantity]);In simple words: useCallback caches the function; useMemo caches the result returned by a calculation.
| Feature | useCallback | useEffect |
|---|---|---|
| Purpose | Caches a function reference. | Runs side-effect logic after rendering when its dependencies require it. |
| Typical use | Stable event handlers or function props. | Fetching data, subscriptions, timers, or synchronizing with external systems. |
| Execution | Does not execute the callback automatically. | Executes its effect setup function as specified by its dependencies. |
React.memo can skip rendering a component when its props have not changed. If a parent passes a newly created function on every render, that function prop can prevent the optimization. Combining memo with useCallback can help when the callback's dependencies remain unchanged.
import { useState, useCallback, memo } from 'react';
const Child = memo(function Child({ onAction }) {
console.log('Child rendered');
return <button onClick={onAction}>Perform Action</button>;
});
function Parent() {
const [count, setCount] = useState(0);
const handleAction = useCallback(() => {
console.log('Action performed');
}, []);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increase Count</button>
<Child onAction={handleAction} />
</div>
);
}
export default Parent;Result: Clicking Increase Count updates the parent counter. Since the callback reference is stable and the child's other props have not changed, React can skip rendering the memoized child.
React.memo.| Mistake | Correct Approach |
|---|---|
| Forgetting the dependency array. | Provide the dependency array as the second argument. |
| Leaving out a value used inside the callback. | Include all required reactive dependencies. |
Using useCallback for every function. |
Use it when stable function identity provides a real benefit. |
| Expecting it to stop every re-render. | Use it with appropriate component memoization and stable props. |
| Calling it inside a loop or condition. | Call Hooks at the top level of a component or custom Hook. |
| Using an empty array when the callback reads changing state. | Include the state dependency or use a functional state updater where appropriate. |
useCallback only at the top level of a React function component or custom Hook.This example uses useCallback to create a stable function for adding tasks. A functional state update avoids needing the current task list in the dependency array.
import { useState, useCallback } from 'react';
function TodoApp() {
const [todos, setTodos] = useState([]);
const [task, setTask] = useState('');
const addTodo = useCallback(() => {
const trimmedTask = task.trim();
if (!trimmedTask) return;
setTodos(previousTodos => [
...previousTodos,
{ id: Date.now(), text: trimmedTask }
]);
setTask('');
}, [task]);
return (
<div>
<h2>Todo List</h2>
<input
value={task}
onChange={event => setTask(event.target.value)}
placeholder="Enter a task"
/>
<button onClick={addTodo}>Add Task</button>
<ul>
{todos.map(todo => (
<li key={todo.id}>{todo.text}</li>
))}
</ul>
</div>
);
}
export default TodoApp;How it works:
addTodo.task changes because the function uses that value.Answer: useCallback is a React Hook that caches a function definition between renders while its dependencies remain unchanged.
Answer: It is used to preserve function identity when that matters, such as when passing callbacks to memoized child components or using a function as a Hook dependency.
Answer: const cachedFn = useCallback(fn, dependencies);
Answer: useCallback caches a function definition, whereas useMemo caches the result of a calculation.
Answer: No. It preserves a function reference when dependencies remain unchanged. In combination with React.memo, it can help a child component skip unnecessary re-renders.
Answer: React returns the function definition from the current render and caches it for future renders.
Answer: You can omit the dependency array, but React then returns a new function on every render, so caching is not achieved.
Answer: No. Hooks must be called at the top level. If each list item needs its own callback, extract a separate component for each item.
Answer: No. Use it when stable function identity provides a measurable or practical benefit. Otherwise, a normal function is often simpler.
Answer: When a callback only needs the previous state to calculate the next state, use a functional updater such as setCount(previous => previous + 1). Do not remove dependencies if the callback still needs their current values.
useState and a memoized increment callback.useCallback.React.memo.useCallback.React.memo only when it helps avoid unnecessary rendering work.Learn React JS concepts, practical development skills, and modern application-building techniques through the following resources:
The useCallback Hook helps React developers cache function definitions between renders when their dependencies remain unchanged. It is especially useful with memoized child components and certain Hook dependencies. Correct dependency management is essential, and memoization should be applied thoughtfully rather than to every function.
