Have You Ever Wondered What useCallback() is?
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 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.
What is useCallback?
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.
Memoization is a way to cache a result so that it doesn’t need to be computed again. This can boost performance.
Function Equality Checks
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 by 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; // => trueThe 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.
Why We Need a useCallback Function
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 –
- incrementAge () will increase my age by 1 if I click the increment age button.
- incrementSalary () will increase my salary by Rs 1000 if I click the increment salary button.
ParentComponent has 3 child components namely:
- <Title> - renders the page title.
- <Count> - renders the age/ salary on the page
- <Button> - To increment the salary and age.
All three components have log statements that are added every time the component re-renders so that we can see the results quickly.
Code Snippet
App.js
import ParentComponent from "./components/ParentComponent";
function App() {
return (
<div className="App">
<ParentComponent />
</div>
);
}
export default App;Title Component (Title.js)
import React from 'react';
function Title() {
console.log ("Title Rendering");
return (
<div>
<h2> useCallBack hook</h2>
</div>
);
}
export default Title;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;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;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;When Dom is Initially Rendered What Happens?
- Our title component is rendered with Title rendering statement as shown in the console in the screenshot below.
- Count component is rendered for age props – Count rendering
- Button component is rendered (age props)
- Count component is rendered for salary props – Count rendering
- Button component is rendered (salary props)
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 count component related to age.
- The button component for incrementing the age.
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().
What is React.memo?
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 the 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 componentsOnly 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.
Let’s test to see if this works. Back in the browser on page load, all the 5 logs are present once. Now, after I click on increment age you can see we now have fewer logs, but it is still not right. When we increment age the button to increment salary is still being re-rendered and vice versa for salary increment. Let’s try to understand why this is happening?
After using React.memo when we increment the age/salary
- Title component does not have its state or props of its own and hence doesn’t re-render.
- Count accepts age as a prop and button accept incrementAge() as a prop which is dependent on age. So, both re-render.
But what we see is that the increment salary button also re-renders. Why?
The count component for salary though does not re-render. This is because a new incrementSalary function is created each time the parent component re-renders. And when dealing with functions, we always have to consider reference equality.
Even though the two functions have exactly the same behaviour, it doesn’t mean they are equal to each other. So, the function before the re-render is different after the re-render.
And, since the function i.e. handleClick is a prop, React.memo sees that the prop has changed and will not prevent the re-render. That’s the reason 3 logs (count, 2 buttons).
So, now how to tell react that there is no need to create incrementSalary function each time. The answer is useCallback Hook. The useCallback hook will cache the incrementSalary function and return that if the salary is not incremented. If the salary does change only then a new function will be returned.
Why useCallback is Used?
- It is useful when passing callbacks to optimized child components that rely on reference equality to prevent unnecessary renders.
- Simple, the usecallback hook is used when you have a component in which a child is rendering repeatedly without the need for it. Pass a callback and dependency array.
How to Use Callback Hook?
- The first step is to import it from react.
import React, { useState, useCallback } from 'react';- We need to call useCallback which accepts a callback function as its first parameter and then any of the dependencies as second parameter.
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
A Bad Use Case
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;Is it a good idea to apply usecallback()?
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.
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!
What is useMemo?
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?
Why is Counter2 Too Slow?
Since every time the state updates, the component re-renders, and when the component re-renders, this isEven function is called. Again the function is slow, so even when we update the counter in the UI, it is slow as well. Therefore, we need a way to tell react not to recalculate certain values when unnecessary, especially those that are complex to calculate.
When we change a counter two’s value, we need to tell react not to calculate whether counter1 is odd or even. This is where the use memo hook comes into the picture.
const isEven = useMemo(() => {
let i = 0;
while (i < 200000) i++;
return counterone % 2 === 0;
}, [counterone]);Use memo is a hook that will only recompute the cached value when one of the dependencies has changed. This optimization heads to avoid expensive calculations on every render.
Interested in learning React JS? Check out the KnowledgeHut’s React full course.
Things to Remember
useCallback() is similar to useMemo() but it memorizes functions instead of values, which makes your application run faster by preventing re-creations.
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. For next steps, check out our blog posts about React create element - react without JSX.
Question / Comments? Feel free to leave them in the comments below.
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!
.png&w=3840&q=75)
.png&w=3840&q=75)
.png&w=3840&q=75)
.png&w=3840&q=75)
.png&w=3840&q=75)
