![[The AI Show Episode 142]: ChatGPT’s New Image Generator, Studio Ghibli Craze and Backlash, Gemini 2.5, OpenAI Academy, 4o Updates, Vibe Marketing & xAI Acquires X](https://www.marketingaiinstitute.com/hubfs/ep%20142%20cover.png)
![[FREE EBOOKS] The Kubernetes Bible, The Ultimate Linux Shell Scripting Guide & Four More Best Selling Titles](https://www.javacodegeeks.com/wp-content/uploads/2012/12/jcg-logo.jpg){kind=logo}
![From drop-out to software architect with Jason Lengstorf [Podcast #167]](https://cdn.hashnode.com/res/hashnode/image/upload/v1743796461357/f3d19cd7-e6f5-4d7c-8bfc-eb974bc8da68.png?#)
.png?#)
.jpg?#)
 (1).webp?#)
_Christophe_Coat_Alamy.jpg?#)
![Rapidus in Talks With Apple as It Accelerates Toward 2nm Chip Production [Report]](https://www.iclarified.com/images/news/96937/96937/96937-640.jpg)
React useCallback: When and how to use it for better performance
Written by Emmanuel John✏️ useCallback is a React Hook that memoizes functions, ensuring they maintain a stable reference across renders unless their dependencies change. This helps optimize performance by preventing unwanted re-renders in child components. React applications often suffer from unnecessary re-renders, which can negatively impact performance. One common cause is when functions are recreated on every render, leading to inefficiencies, especially when passed as props to memoized components. This is where useCallback comes in. By the end of this guide, you'll have a clear understanding of useCallback and how to use it properly in your React applications. TL;DR What is useCallback used for? useCallback is used to prevent function recreation on every render, improving performance in React applications. What's the difference between useCallback and useMemo? While useCallback memoizes functions, useMemo memoizes values. When should you use callbacks? Callbacks are useful when passing functions to memoized components (React.memo) or optimizing event handlers in performance-critical applications. What is the difference between useEffect and useCallback? Both are React hooks, but useEffect runs side effects after renders, while useCallback stabilizes function references. Function reference stability in React Before discussing the useCallback hook, let’s understand function reference and why function reference stability matters in React. In JavaScript, functions are objects. Each time a function is declared inside a component, a new function instance is created with a different reference in memory. For example: function MyComponent() { const handleClick = () => { console.log('Clicked'); }; return ; } In the above code snippet, handleClick is recreated on every render. Even if the logic inside it hasn’t changed, its reference is new. This can cause unnecessary re-rendering when the function is passed as a prop to a memoized child component (React.memo). Why function reference stability matters in React When a function reference changes, any memoized child component receiving that function as a prop will re-render even if the function’s behavior hasn’t changed. const Parent = () => { const handleClick = () => console.log('Clicked'); return ; }; const Child = React.memo(({ onClick }) => { console.log('Child rendered'); return Click Me; }); Without stabilizing the handleClick function with the useCallback hook, Child will re-render on every render of Parent, even if the product list remains unchanged. What is useCallback? useCallback() is one of React’s performance optimization hooks that caches a function declaration on every render and returns the same function without reference changes if the dependencies remain unchanged since the previous render. Syntax const memoizedFunction = useCallback(() => { //logic here }, [dependency1, dependency2, ...]); The useCallback hook takes two arguments. The first is the function you want to memoize, and the second is a dependency array. Whenever any value in this array changes, the function is recreated with a new reference. How useCallback prevents unnecessary re-renders Let’s consider an e-commerce admin case study where a product list page displays the list of product items and the product item component receives a function prop to delete the product from the list. Create a ProductList.jsx component in your React project and add the following: import React, { memo, useState } from 'react'; const ProductItem = memo(({ product, onDelete }) => { console.log("Rendering product item component") return (  ### {product.name} {product.description} onDelete(product.id)} className="bg-red-500 text-white px-4 py-2 rounded-md hover:bg-red-600" > Delete ); }); const ProductList = () => { const [isLoggedIn, setIsLoggedIn] = useState(false) const [products, setProducts] = useState([ { id: 1, name: 'Product 1', description: 'Description for Product 1', image: 'https://res.cloudinary.com/muhammederdem/image/upload/q_60/v1536405217/starwars/item-2.webp' }, { id: 2, name: 'Product 2', description: 'Description for Product 2', image: 'https://res.cloudinary.com/muhammederdem/image/upload/q_60/v1536405217/starwars/item-4.webp' }, { id: 3, name: 'Product 3', description: 'Description for Product 3', image: 'https://res.cloudinary.com/muhammederdem/image/upload/q_60/v1536405217/starwars/item-3.webp' }, { id: 4, name: 'Product 4', description: 'Description for Product 4', image: 'https://res.cloudinary.com/muhammederdem/image/upload/q_60/v1536405217/starwars/
Written by Emmanuel John✏️
useCallback is a React Hook that memoizes functions, ensuring they maintain a stable reference across renders unless their dependencies change. This helps optimize performance by preventing unwanted re-renders in child components.
React applications often suffer from unnecessary re-renders, which can negatively impact performance. One common cause is when functions are recreated on every render, leading to inefficiencies, especially when passed as props to memoized components. This is where useCallback comes in.
By the end of this guide, you'll have a clear understanding of useCallback and how to use it properly in your React applications.
TL;DR
What is useCallback used for?
useCallback is used to prevent function recreation on every render, improving performance in React applications.
What's the difference between useCallback and useMemo?
While useCallback memoizes functions, useMemo memoizes values.
When should you use callbacks?
Callbacks are useful when passing functions to memoized components (React.memo) or optimizing event handlers in performance-critical applications.
What is the difference between useEffect and useCallback?
Both are React hooks, but useEffect runs side effects after renders, while useCallback stabilizes function references.
Function reference stability in React
Before discussing the useCallback hook, let’s understand function reference and why function reference stability matters in React. In JavaScript, functions are objects. Each time a function is declared inside a component, a new function instance is created with a different reference in memory. For example:
function MyComponent() {
const handleClick = () => {
console.log('Clicked');
};
return <button onClick="{handleClick}">;
}</button>
In the above code snippet, handleClick is recreated on every render. Even if the logic inside it hasn’t changed, its reference is new. This can cause unnecessary re-rendering when the function is passed as a prop to a memoized child component (React.memo).
Why function reference stability matters in React
When a function reference changes, any memoized child component receiving that function as a prop will re-render even if the function’s behavior hasn’t changed.
const Parent = () => {
const handleClick = () => console.log('Clicked');
return <child onclick="{handleClick}">;
};
const Child = React.memo(({ onClick }) => {
console.log('Child rendered');
return <button onclick="{onClick}">Click Me</button>;
});</child>
Without stabilizing the handleClick function with the useCallback hook, Child will re-render on every render of Parent, even if the product list remains unchanged.
What is useCallback?
useCallback() is one of React’s performance optimization hooks that caches a function declaration on every render and returns the same function without reference changes if the dependencies remain unchanged since the previous render.
Syntax
const memoizedFunction = useCallback(() => {
//logic here
}, [dependency1, dependency2, ...]);
The useCallback hook takes two arguments. The first is the function you want to memoize, and the second is a dependency array. Whenever any value in this array changes, the function is recreated with a new reference.
How useCallback prevents unnecessary re-renders
Let’s consider an e-commerce admin case study where a product list page displays the list of product items and the product item component receives a function prop to delete the product from the list.
Create a ProductList.jsx component in your React project and add the following:
import React, { memo, useState } from 'react';
const ProductItem = memo(({ product, onDelete }) => {
console.log("Rendering product item component")
return (
<div classname="p-4 w-full border rounded-md shadow-sm mb-4 flex flex-col items-center text-center">
### {product.name}
{product.description}
<button onclick="{()" =="">onDelete(product.id)}
className="bg-red-500 text-white px-4 py-2 rounded-md hover:bg-red-600"
>
Delete</button>
</div>
);
});
const ProductList = () => {
const [isLoggedIn, setIsLoggedIn] = useState(false)
const [products, setProducts] = useState([
{
id: 1,
name: 'Product 1',
description: 'Description for Product 1',
image: 'https://res.cloudinary.com/muhammederdem/image/upload/q_60/v1536405217/starwars/item-2.webp'
},
{
id: 2,
name: 'Product 2',
description: 'Description for Product 2',
image: 'https://res.cloudinary.com/muhammederdem/image/upload/q_60/v1536405217/starwars/item-4.webp'
},
{
id: 3,
name: 'Product 3',
description: 'Description for Product 3',
image: 'https://res.cloudinary.com/muhammederdem/image/upload/q_60/v1536405217/starwars/item-3.webp'
},
{
id: 4,
name: 'Product 4',
description: 'Description for Product 4',
image: 'https://res.cloudinary.com/muhammederdem/image/upload/q_60/v1536405217/starwars/item-1.webp'
}
]);
const toggleLogin = () => {
setIsLoggedIn(val => !val );
};
const deleteProduct = (id) => {
setProducts(products.filter(product => product.id !== id));
};
return (
<div className="w-full p-10">
<h2 className="text-2xl font-bold mb-6 text-center">Product List</h2>
{isLoggedIn ? <button onclick="{toggleLogin}" classname="bg-red-500 text-white px-4 py-2 rounded-md hover:bg-red-600 mb-6">
Log out
</button> : React.memo wraps the ProductItem component to prevent unnecessary re-renders. This means ProductItem will only re-render if its product or onDelete props change.
We’ve added console log to check whether the component re-renders when the isLoggedIn state updates. Without memo, ProductItem would re-render every time isLoggedIn changes, even if the product list remains unchanged.
Running the project should result in the following:
Did you notice that the ProductItem component re-renders every time we click the Log in or Log out button? This makes memoization ineffective. Imagine having thousands of products in the list — these unnecessary re-renders could slow down the app significantly. If the buttons are clicked repeatedly, it might even lead to performance issues or crashes.
The problem is that each time the isLoggedIn state changes, the ProductList component re-renders and recreates the deleteProduct function with a new reference, causing unnecessary re-rendering when the function is passed as a prop to the memoized ProductItem component (React.memo).
To resolve this issue, we have to stabilize the deleteProduct function reference by wrapping it in a useCallback hook:
const deleteProduct = useCallback((id) => {
setProducts((prevProducts) => prevProducts.filter(product => product.id !== id));
}, []);
Now the ProductItem component no longer re-renders after clicking the Log in or Log out button.
Avoiding unnecessary dependencies with useCallback
Imagine you're building an e-commerce app where users can infinitely scroll through products. The product list is fetched from an API, and users can favorite items by clicking a heart icon. To optimize performance, we want to avoid unnecessary function re-creations every time the component re-renders.
If you think wrapping the toggleFavorite function in useCallback is the right approach, you're correct. Here is an implementation of this feature:
"
import React, { useState, useCallback } from 'react';
const ProductItem = React.memo(({ product, onFavorite }) => {
console.log(`Rendering ${product.name}`);
return (
"p-4 w-full border rounded-md shadow-sm mb-4 flex flex-col items-center text-center">
### {product.name}
