React useCallback Hook: Why, When & How to Use It?

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.  

What is useCallback Hook in React?

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.

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 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.

Why We Need a React 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:

1. <Title> - renders the page title.
2. <Count> - renders the age/ salary on the page
3. <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

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;

When Dom is Initially Rendered What Happens? 

1. Our title component is rendered with Title rendering statement as shown in the console in the screenshot below.
2. Count component is rendered for age props – Count rendering
3. Button component is rendered (age props)
4. Count component is rendered for salary props – Count rendering
5. 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 is 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().

How to Use Callback Hook Function in React?

• 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 of React useCallback() Hook

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.

Without vs With useCallback in React [With Code Example] 

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. 

1. Without useCallback() Hook

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. 

2. With useCallback 

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. 

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 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.  

• Initially, clicking the "increment age" button caused both the "increment age" and "increment salary" buttons to re-render, even though only the age value changed.
• We introduced React.memo to optimize re-renders. While the title component doesn't re-render (as expected), the "count" components for age and salary still do.
• The culprit? The incrementSalary function. Even though it has the same functionality, a new function is created every time the parent component re-renders.
• React relies on reference equality for props. Since the incrementSalary function reference changes with each re-render, React.memo considers it a prop change and triggers a re-render of the "increment salary" button (despite the function's behavior remaining the same).

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.

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 React useCallback is Used?

• Performance Optimization: Avoids Recreating Functions: useCallback is invaluable for memoizing functions, preventing unnecessary function recreations during re-renders. This optimization can be critical for performance in specific scenarios. 
• Avoids Unnecessary Rerenders: Preserves Referential Equality: Memoized functions from useCallback maintain referential equality between renders, preventing unnecessary re-renders of child components reliant on these functions. 
• Optimizing Child Components: Efficiently Memoizes Functions Passed as Props: When passing functions as props to child components, employing useCallback ensures efficient memoization, enhancing the child component's performance. 
• Dependency Control: Explicit Dependency Management: useCallback allows for explicit dependency management, ensuring that the memoized function is recreated only when specified dependencies change. This control proves pivotal in certain useCallback scenarios. 
• Prevents Unwanted Effects: Stable Callbacks: In scenarios requiring stable callback references, such as event handlers, useCallback helps maintain reference stability across renders. 
• Optimizing Hooks: Enhances Performance of Hooks: When using custom hooks reliant on stable callback references, useCallback proves valuable in optimizing the overall hook performance. 
• Memoization in Event Handlers: Prevents Unnecessary Rerenders in Event Handlers: For event handlers in JSX, useCallback can prevent unnecessary re-renders by memoizing the handler function, thereby improving component efficiency.

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!

When Should You Not use useCallback? 

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: 

• Simple Functions: No Need for Memoization: If a function is straightforward and doesn't involve heavy computations or reliance on external resources, using useCallback might introduce unnecessary overhead. 
• Infrequent Renders: Rare Render Triggers: When a component doesn't undergo frequent re-renders, the benefits of memoization provided by useCallback may not justify its usage. 
• Child Components: Avoid in Child Components: Particularly in child components that receive stable functions as props, using useCallback might prove redundant since these functions rarely change. 
• Performance Overhead: Potential Overhead: In specific scenarios, the additional overhead introduced by memoization might outweigh the performance gains, particularly in small or uncomplicated applications. 
• Premature Optimization: Keep It Simple: Avoid using useCallback solely for the sake of optimization. If your application doesn't encounter performance issues, prioritize simplicity over premature optimization. 
• Event Handlers: Event Handlers in JSX: For simple event handlers in JSX, such as onClick functions, using useCallback may be unnecessary unless performance profiling highlights an optimization need. 
• Dynamic Dependencies: Dynamic Dependencies: When a function's dependencies frequently change, employing useCallback with dynamic dependencies could lead to unexpected behavior, defeating the purpose of memoization. 

Conclusion 

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.