To memorize components and expensive calculations, React provides two hooks, useMemo() and React.memo(). These hooks help to prevent unnecessary re-rendering of components and improve the performance of the application.

usememo in react is a very useful hook that we can use to handle expensive calculations.

Before we start explaining the useMemo() and React.memo() Hooks, Let’s understand what is Expensive calculation in react because these hooks help to memorize the expensive calculations in react and rendered the results when there is a change. You are going to see the word expensive calculation, so I thought I should explain it before we move further.

Expensive calculation in react

In React, the expensive calculation means operations or computations which require more processing time and resources. This calculation can be time-consuming and involve complex operations and algorithms.

Any algorithm that causes a delay in the user interface can be considered an expensive calculation.

Now, How we can optimize these expensive calculations? Here is the solution.

React.memo()

The React.memo() function is a higher order component that you can wrap around a functional component to memorize its result, it basically compares the old props and state to the new props and state, If there is a change in props and states it will update the component or we can say it will re-rendered the component. This React memorizing technique allow us to optimize functional component and prevent unnecessary re-rendering of components.

Here’s an example of how to use React.memo in react

import React from 'react';

const MyComponent = React.memo((props) => {
  // Component logic goes here
});

export default MyComponent;

In the above example, we are wrapping the component with React.memo() and this will automatically optimize the rendering process. This can be more useful when there are frequent changes inside the component happening and you need to compare whether there is any change in prop or state or not.

useMemo()

The useMemo in react basically memorizes the result of a function or an expensive calculation and stores it and reuses it when it is needed. it takes a function and list of dependencies or we can say an array of dependencies and this function is only re-evaluated when there is a change in any of the dependencies.

If there is no change it will return the cached result and this help us to reduce the unnecessary calculations.

Here’s an example of how to use useMemo():

import React, { useMemo } from 'react';

const MyComponent = ({ value }) => {
  const expensiveCalculationResult = useMemo(() => {
    // Write expensive calculation or function here
    return someExpensiveCalculation(value);
  }, [value]);

  return <div>{expensiveCalculationResult}</div>;
};

export default MyComponent;

So in the above code, we can see expensiveCalculationResult is memorized using useMemo(). It will only be reevaluated when the value prop change. So this will ensure that, if there is no change in value then no need to repeat the expensive calculations during re-rendering.

The advantages of using useMemo() include:

Performance optimization

As we already know, usememo in react allows us to optimize our React components by memorizing the results of expensive calculations. It improves the performance because it only uses cached results if there is no change in props or dependencies.

Avoiding unnecessary re-renders

We are using the cached result of expensive calculations and this will be helpful for example, when we are dealing with a large list of data, if there is no change in data then we don’t need to re-rendered this whole list again.

Gives Control over dependencies

We can specify the dependencies which trigger the recalculation of expensive calculations. This means we can only memorize the values of dependencies that are necessary for the recalculation of expensive calculations. No need to check for all the dependencies or we can say no need to memorize all the dependencies.

Now we know when to use useMemo(), but there is a catch, it now always needs to use useMemo in react.

If there is no heavy computation or calculation then you might don’t need it.

if the calculation is simple and very lightweight then it would be better if you perform it directly in the component rendering logic rather than useMemo()

So now you know when to use useMemo in react

Share this article with your friend and keep smiling. Happy Reading 🙂