INSIGHTS
5 min read
Published on 03/13/2023
Last updated on 06/18/2024
React Rerender: Avoid expensive recalculation with the useMemo hook
Share
Exploring the power of React Hooks through the lens of debugging the common and expensive recalculation problem
One of my first tasks as a React developer was to show a banner in a specific time range. After the first run of developing it, I found that the component that renders the banner is running the calculation for the time range multiple times. This was the first time I met this issue, but it turned out to be a very common problem for React developers. In this blog post, I’ll share how I resolved it using the useMemo hook.
The problem necessitating useMemo: Inefficient recalculation
The main cause of inefficient recalculation is unnecessary re-calculation. A re-calculate is unnecessary when the component's props and state have not changed but the calculation is still computed. This can happen, for example, when a parent component re-renders and passes the same props value to a child component, and the child component calls the calculation method even though it’s the same input.
Debugging React rerendering: The React developer tools profiler is here!
After finishing creating the component, a code reviewer asked me to check the calculate method and that it didn’t cause performance issues. To do it, I used React Developer Tools Profiler.
When you have React Developer Tools installed, open the developer console and go to the "React" or "Components" tab. From there, click the "Profiler" button to open the Profiler panel. To start recording component performance, click the "Record" button and interact with your app to trigger updates to your React components. Then, click the "Stop" button to stop recording. You can then inspect the recorded performance data to identify which components are causing performance issues in your application. The performance profile will show you a breakdown of the time spent rendering each component, as well as information on how many times each component is rendered. Once you've identified the problem, you can make necessary changes to optimize the component performance and re-test to see if the issue is resolved.
Using this React developer tool, I found that the new component I added had a high time spent when the component re-rendered, so I started investigating how to fix it.
One of React's core features is the ability for components to re-render in response to changes in their props or state. However, when a component re-renders, it can cause a cascading effect where child components also re-render, leading to poor performance, unintended side effects, inconsistencies in the UI, and unnecessary re-renders. This is known as the problem of multiple renderings.
Solution: The useMemo Hook to the rescue!
While searching for how to solve this issue, the most common solution is to use the useMemo hook.
React Hooks are functions that allow you to add state and other React features to functional components. Hooks also let you "hook into" React state and lifecycle features from functional components. Hooks let you reuse stateful logic across components without writing a class.
The useMemo
hook is a way to optimize the performance of your React application by only re-computing a value when one of its dependencies has changed. It is particularly useful for preventing unnecessary re-renders in functional components.
Here's an example of how you can use useMemo
to fix the problem of expensive recalculation in a component by setting data
as a dependency for filteredData
:
import React, { useMemo } from 'react';
function MyComponent({ someProp }) {
// Define an expensive calculation
const expensiveCalculation = (someProp) => {
// ... Some expensive calculation that depends on the value of someProp
return result;
}
// Use useMemo to memoize the expensive calculation
const memoizedValue = useMemo(() => expensiveCalculation(someProp), [someProp]);
return (
<div>
{/* Render the memoized value */}
{memoizedValue}
</div>
);
}
In this example, the MyComponent
function takes a someProp
prop and performs an expensive calculation based on its value. Using the useMemo
hook, we can memoize the expensive calculation so that it is only performed when the value of someProp
changes.
It is possible to specify more than one dependency. In this case, the value will be re-calculated if one of the dependencies is changed. For this reason, the dependencies array should be kept as small as possible.
The useMemo hook can also be used to memoize expensive calculations such as sorting, filtering, or mapping large data sets. This helps you avoid expensive recalculations down the line.
In my case, I used a boolean function as a dependency for useMemo. The function indicates whether the specific banner should be displayed or not. Only when this state is changed will the component be re-rendered.
useMemo as a key React developer tool
useMemo
is a powerful React developer tool for avoiding unnecessary re-calculations. It allows you to memoize values computed based on props or state and can be particularly useful for handling large data sets or expensive calculations. Using useMemo in your React component can effectively optimize your application's performance.
Recalculation might be seen as a technology failure, but part of the process of developing new technology insights is learning from those failures—and adapting your processes as you go.
Get emerging insights on innovative technology straight to your inbox.
Driving productivity and improved outcomes with Generative AI-powered assistants
Discover how AI assistants can revolutionize your business, from automating routine tasks and improving employee productivity to delivering personalized customer experiences and bridging the AI skills gap.
Related articles
The Shift is Outshift’s exclusive newsletter.
The latest news and updates on cloud native modern applications, application security, generative AI, quantum computing, and other groundbreaking innovations shaping the future of technology.