React useCallback Hook: Why, When & How to Use It?
Updated on Oct 28, 2024 | 14 min read | 21.0k views
Share:
For working professionals
For fresh graduates
More
Updated on Oct 28, 2024 | 14 min read | 21.0k views
Share:
Table of Contents
Before starting, let’s understand performance optimization. Whenever we develop a React application, we need to consider the render time. Enhancing performance in an application includes preventing unnecessary renders and reducing the time to render our DOM. So, here comes the useCallback() method, which can help us prevent some unnecessary renders and provide us with a performance boost.
In this article, we are looking to dive deeper into the React useCallback() hook and how to properly use it to write efficient React code. The best learning comes from practice, but you’re genuinely interested in mastering React, you can invest in a react full course that is comprehensive and hands-on and helps you polish your skills as a real-life developer.
Let us first understand what useCallback is. useCallback is a hook that will return a memoized version of the callback function that only changes if one of the dependencies has changed.
React's useCallback hook provide a performance improvement technique known as memoization. It provides a memoized version of the callback function. Memorization essentially caches the function's result for a specific set of inputs, avoiding wasteful re-creations if those inputs (dependencies) have not changed. This can dramatically improve performance in your React components by eliminating duplicate computations.
To understand how we use it, let’s check out what problem it solves. Let’s write a simple add function.
add1 and add2 are functions that add two numbers. They’ve been created using the add function. In JavaScript, function objects are regular objects. Although add1 and add2 have the same code, they are two different function objects. Comparing them evaluates to false.
That’s how JavaScript objects work. Each object (including a function object) is equal to itself, i.e., add1 === add1.
function add() {
return (a, b) => a + b;
}
const add1 = add();
const add2 = add();
add1(4, 5); // => 9
add2(2, 2); // => 4
add1 === add2; // => false
add1 === add1; // => true
The functions add1 and add2 share the same code source but they are different function objects. Comparing them (add1 === add2) will always return false.
So, this is the concept of function equality checks.
Are you interested in learning deeper concepts of web development? You can refer online course here Web Development Certification Online.
First, let's understand what the problem is and why we need a useCallback function.
Let’s create a component called ParentComponent. This component will have states - age, salary, and functions –
ParentComponent has 3 child components, namely:
All three components have log statements that are added every time the component re-renders so that we can see the results quickly.
A. App.js
import ParentComponent from "./components/ParentComponent";
function App() {
return (
<div className="App">
<ParentComponent />
</div>
);
}
export default App;
B. Title Component (Title.js)
import React from 'react';
function Title() {
console.log ("Title Rendering");
return (
<div>
<h2> useCallBack hook</h2>
</div>
);
}
export default Title;
C. Button Component (Button.js)
import React from 'react';
function Button(props) {
console.log(`Button clicked ${props.children}`);
return (
<div>
<button onClick = {props.handleClick}> {props.children} </button>
</div>
);
}
export default Button;
D. Count Component (Count.js)
import React from 'react';
function Count(props) {
console.log("Count rendering");
return (
<div>
{props.text} is {props.count}
</div>
);
}
export default Count;
E. Parent Component (ParentComponent.js)
import React, {useState} from 'react';
import Button from './Button';
import Title from './Title';
import Count from './Count';
function ParentComponent() {
const [age, setAge] = useState(25);
const [salary, setSalary] = useState(25000)
const incrementAge = () => {
setAge(age + 1);
}
const incrementSalary = () => {
setSalary(salary + 1000);
}
return (
<div>
<Title/>
<Count text="age" count={age} />
<Button handleClick={incrementAge}>Increment my age</Button>
<Count text="salary" count={salary} />
<Button handleClick={incrementSalary}>Increment my salary</Button>
</div>
);
}
export default ParentComponent;
As you can see in the screenshot below, when you click the increment my age button, your age is incremented by one i.e. from 25 to 26. However, note that all the components were again called behind the scenes (in console).
We can see that the age has been incremented successfully, but also our other components re-render every time, and that shouldn’t. The only thing that has changed in our app is the age state. But here, every react component is re-rendered regardless of whether it has changed.
In our application, this re-render is completely unnecessary. So, what could we do to avoid an unnecessary re-render in the component?
In our example, when we increment the age only two things should be re-rendered.
The other three log statements don’t need to be re-rendered. The same is the case with salary. If you increment the salary, title and age components should not be re-rendered. So, how do we optimize this? Well, the answer is React.Memo().
import React, { useState, useCallback } from 'react';
const incrementAge = useCallback(() => {
setAge(age + 1);
}, [age]);
const incrementSalary = useCallback(() => {
setSalary(salary + 1000);
}, [salary]);
In addition, you can pass an empty array of dependencies. This will execute the function only once, otherwise, it will return a new value for each call.
useCallback(() => { myFunction() }, []);
Now, see only 2 logs are visible. So, we have successfully optimized our components.
We have already seen one good use case of useCallback and now the bad one is
import React, { useCallback } from 'react';
function MyFunc () {
const handleClick = useCallback(() => {
// handle the click event
}, []);
return <MyChild onClick={handleClick} />;
}
function MyChild ({ onClick }) {
return <button onClick={onClick}>I am a child</button>;
}
export default MyFunc;
Probabaly not since the <MyChild> component is light and its re-rendering doesn’t affect performance.
Don't forget that useCallback() hook is called each time MyComponent renders. Even though useCallback() returns the same function object, the inline function is re-created each time (useCallback() only skips it).
With useCallback() you also add more complexity to the code because you have to make sure the dependencies of useCallback(..., deps) march those inside the memoized callback.
In conclusion, optimization costs more than not having it.
The useCallback hook in React is a powerful tool for optimizing performance by memoizing functions. This ensures that functions are not re-created on every render, which can be particularly beneficial in complex components. Let's explore the difference between using useCallback and not using it with a practical example.
In this example, we have a simple component that increments a counter and passes a callback to a child component:
import React, { useState } from 'react';
function ParentComponent() {
const [count, setCount] = useState(0);
const incrementCount = () => {
setCount(prevCount => prevCount + 1);
};
return (
<div>
<p>Count: {count}</p>
<button onClick={incrementCount}>Increment</button>
<ChildComponent handleClick={incrementCount} />
</div>
);
}
function ChildComponent({ handleClick }) {
console.log('ChildComponent rendered');
return <button onClick={handleClick}>Child Button</button>;
}
export default ParentComponent;
Here, every time the ParentComponent re-renders, the incrementCount function is recreated. This can cause unnecessary re-renders of the ChildComponent, as its props change even though the function logic remains the same.
Now, let's see how we can optimize this by using the useCallback hook:
import React, { useState, useCallback } from 'react';
function ParentComponent() {
const [count, setCount] = useState(0);
const incrementCount = useCallback(() => {
setCount(prevCount => prevCount + 1);
}, []);
return (
<div>
<p>Count: {count}</p>
<button onClick={incrementCount}>Increment</button>
<ChildComponent handleClick={incrementCount} />
</div>
);
}
function ChildComponent({ handleClick }) {
console.log('ChildComponent rendered');
return <button onClick={handleClick}>Child Button</button>;
}
export default ParentComponent;
In this version, incrementCount is memoized using useCallback. This means the function is only re-created if its dependencies change. Since we have an empty dependency array ([]), the function is created only once and remains the same across renders. As a result, ChildComponent will not re-render unnecessarily when the ParentComponent re-renders, leading to improved performance.
React.memo is a Higher Order Component (HOC) that prevents a functional component from being re-rendered if its props or state do not change.
Please keep in mind React.memo() has nothing to do with hooks. It has been a feature since react version 16.6 as class components already allowed you to control re-renders with the use of PureComponent or shouldComponentUpdate.
Let’s make use of React.memo() in our example.
In all three components while exporting, encapsulate/wrap your component in React.memo.
import React from 'react';
function Button(props) {
console.log(`Button clicked ${props.children}`);
return (
<div>
<button onClick = {props.handleClick}> {props.children} </button>
</div>
);
}
export default React.memo(Button); //Similarly for other components
Only alter the last line in Count and Title Component. The rest is the same.
export default React.memo(Count); //Count.js
export default React.memo(Title); //Title.js
That’s it! Now, your component will re-render if there is any change in its state or props.
So, now how do we tell React that there is no need to create an incrementally function each time? The answer is useCallback Hook. The useCallback hook will cache the incrementSalary function and return it if the salary is not incremented. If the salary does change, only then a new function will be returned.
Let's use an example to illustrate. I will create a new component Counter.js with 2 buttons- one to increment counter1 and other to increment counter2. Based on the counter1 value, we will show whether is odd or even.
import React , {useState, useMemo} from 'react';
function Counter() {
const [counterone, setCounterOne] = useState(0);
const [countertwo, setCounterTwo] = useState(0);
const incrementOne = () => {
setCounterOne(counterone + 1);
}
const incrementTwo = () => {
setCounterTwo(countertwo + 1);
}
const isEven = () => {
return counterone % 2 === 0;
};
return (
<div>
<button onClick={incrementOne}>Count one - {counterone}</button>
<button onClick={incrementTwo}>Count two - {countertwo}</button>
<span>{isEven ? "Even" : "odd"}</span>
</div>
);
}
export default Counter;
Let’s take our problem a step further. We have added a while loop that iterates for a long time. So, while the loop has no effect on a return value, it does slow down the rate at which we compute whether the counter1 is odd/even.
Now, when we execute the code, we notice there is a slight delay before the UI updates. Due to the fact in the UI, we’re rendering whether a number is odd or even, and that logic comes from the isEven function, which unfortunately turns out to be very slow and that is of course expected. The counter2 is also slow when we click on 2nd button. This is really odd, isn’t it?
Unlock your coding potential with Python! Gain a competitive edge in the digital world with our online certificate in Python programming. Start your journey today and become a Python pro in no time. Join now!
In my experience, it's essential to consider when to steer clear of useCallback in React. While useCallback can enhance performance in certain cases, it's crucial to weigh its advantages against the complexities it introduces. Here are some scenarios where I suggest avoiding its use:
useCallback() is similar to useMemo(), but it memorizes functions instead of values, which makes your application run faster by preventing re-creations. The useCallback hook is particularly useful when passing functions as props to highly optimized child components, ensuring that these functions maintain their identity across renders.
Prior to optimizing a component, you should make sure it is worth the trade-off. When you evaluate the performance upgrade, measure your component speed before you begin the optimization process.
Thanks for reading!
Looking to boost your career in data science? Discover the power of data engineering certification. Gain the skills and knowledge needed to excel in this rapidly growing field. Start your journey today!
Unlock your potential with our free Software Development courses, designed to equip you with the skills and knowledge needed to excel in the tech world. Start learning today and advance your career!
Enhance your expertise with our comprehensive Software Engineering courses, designed to equip you with practical skills and knowledge to excel in the ever-evolving tech landscape.
Get Free Consultation
By submitting, I accept the T&C and
Privacy Policy
India’s #1 Tech University
Executive PG Certification in AI-Powered Full Stack Development
77%
seats filled
Top Resources