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.