Great Confusion About React Memoization Methods: React.memo, useMemo, useCallback

Introduction:

Since React 16.6, React team add React.memo() as an alternative to functions. Since React 16.8, React team add React Hook so they add two Hooks useMemo , useCallback. The usage of Memoization in React becomes wider and important in some situations. So In this article, we will explain Memoization and its different methods.

We will go through the following main points in the article:

1-What is Memoization?

2-React.Memo

3-React.PureComponent

4-useMemo

5-useCallback

6-Should we Memoize

Please follow me over Medium, to get a notification about next new articles. I’m also active on Twitter @IbraKirill.

What is Memoization?

In computing, memoization is an optimization technique used primarily to speed up computer programs by storing the results of expensive function calls and returning the cached result when the same inputs occur again. It is the process of modifying a software system to make some aspect of it work more efficiently or use fewer resources.

Memoization In React:

In the lifecycle of a component, React re-renders the component when an update is made. When React checks for any changes in a component, it may detect an unintended or unexpected change due to how JavaScript handles equality and shallow comparisons. This change in the React application will cause it to re-render unnecessarily.

Additionally, if that re-rendering is an expensive operation, like a long for loop, it can hurt performance. Expensive operations can be costly in time, memory, or processing. In addition to potential technical issues, this may lead to poor user experience.

If one part re-renders, it re-renders the entire component tree. Thus, React released the memo idea to fix this.

React.memo:

It is a is a higher-order component (HOC) used to optimize functional components by memoizing them. It prevents unnecessary re-renders by comparing the previous and next props. This can improve performance, especially in components that receive the same props frequently.

It is a performance optimization tool, for function components instead of classes. If our function component renders the same result given the same props, React will memoize, skip rendering the component, and reuse the last rendered result.

Example:

const MyComponent = React.memo(function MyComponent(props) {
/* render using props */
});

React.memo only checks for prop changes. If a function component wrapped in React.memo has a useState, useReducer or useContext Hook in its implementation, it will still re-render when state or context change.

Important Note about custom comparison:
By default, it will only shallowly compare complex objects in the props object. If you want to customize the comparison functionality in React.memo, you can pass a second argument to React.memo, which is a custom comparison function. This function allows you to define how the props are compared to determine if a re-render is necessary.

Custom Comparison Function

The custom comparison function takes two arguments:

1. prevProps: The previous props of the component.
2. nextProps: The next props of the component.

Return: It should return true if the props are considered equal (i.e., no re-render is needed), or false if the props are different (i.e., a re-render is needed).

Example:

const MyComponent = React.memo(
  function MyComponent(props) {
    // Component code
  },
  (prevProps, nextProps) => {
    // Custom comparison logic
    return prevProps.someValue === nextProps.someValue;
  }
);

or:

function MyComponent(props) {
  /* render using props */
}
function areEqual(prevProps, nextProps) {
  /*
  return true if passing nextProps to render would return
  the same result as passing prevProps to render,
  otherwise return false
  */
}
export default React.memo(MyComponent, areEqual);

Practical Example:

import React from 'react';

const MyComponent = React.memo(
  function MyComponent({ name, age }) {
    console.log('Rendering:', name, age);
    return (
      <div>
        <p>Name: {name}</p>
        <p>Age: {age}</p>
      </div>
    );
  },
  (prevProps, nextProps) => {
    // Custom comparison logic
    return prevProps.name === nextProps.name && prevProps.age === nextProps.age;
  }
);

export default function App() {
  const [name, setName] = React.useState('Alice');
  const [age, setAge] = React.useState(30);
  const [other, setOther] = React.useState('value');

  return (
    <div>
      <button onClick={() => setName(name === 'Alice' ? 'Bob' : 'Alice')}>Toggle Name</button>
      <button onClick={() => setAge(age + 1)}>Increment Age</button>
      <button onClick={() => setOther(other === 'value' ? 'another' : 'value')}>Change Other</button>
      <MyComponent name={name} age={age} />
    </div>
  );
}

Explanation:

1- Component: MyComponent receives name and age as props and displays them.

2- Custom Comparison Function: The function (prevProps, nextProps) => prevProps.name === nextProps.name && prevProps.age === nextProps.age compares name and age props. If both name and age are the same between renders, MyComponent will not re-render.

This method only exists as a performance optimization. Do not rely on it to “prevent” a render, as this can lead to bugs.

There’s a reason why React.memo utilizes shallow comparison by default for determining when to rerender: This is because there is an additional overhead in checking if a value has been memoized every time we need to access it and the more complex the data structure of the value, the worse the overhead is.

Note

Unlike the shouldComponentUpdate() method on class components, the areEqual function returns true if the props are equal and false if the props are not equal. This is the inverse from shouldComponentUpdate.

Let’s consider a simple example where we don’t use memoization, then we add memoization to it:

Every time inc is clicked, both renderApp and renderList are logged, even though nothing has changed for List . If the tree is big enough, it can easily become a performance bottleneck. We need to reduce the number of renders.

In the above example, memoization works properly and reduces the number of renders. During mount renderApp and renderList are logged, but when inc is clicked, only renderApp is logged.

When to use React.memo:

We can use React.memo if React component:

1-Will always render the same thing given the same props (i.e, if we have to make a network call to fetch some data and there’s a chance the data might not be the same, do not use it).

2- Renders expensively (i.e, it takes at least 100ms to render).

3- Renders often.

If our component does not meet the above requirements, then we might not need to memoize it as using React.memo, in some cases, make performance worse as it’s more code for the client to parse.

When in doubt, profile our component to see if it would be beneficial to memoize it.

React.PureComponent

We can do the same with class-based components like functional components wrap the function component with React.memo(), but here we will extend the PureComponent in the class component.

React.PureComponent is similar to React.Component. The difference between them is that React.Component doesn’t implement shouldComponentUpdate(), but React.PureComponent implements it with a shallow prop and state comparison.

If our React component’s render() function renders the same result given the same props and state, we can use React.PureComponent for a performance boost in some cases.

class MyComponent extends React.PureComponent {
}

When to use Component or PureComponent:

The major difference between React.PureComponent and React.Component is PureComponent does a shallow comparison on state/props change. It means that when comparing scalar values it compares their values, but when comparing objects it compares only references. It helps to improve the performance of the app.

We should go for React.PureComponent when we can satisfy any of the below conditions.

• State/Props should be an immutable object
• State/Props should not have a hierarchy
• We should call forceUpdate when data changes

If we are using React.PureComponent we should make sure all child components are also pure.

useMemo:

useMemo() is a built-in React hook that accepts 2 arguments — a function that computes a result and the depedencies array.

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

During initial rendering, useMemo(compute,dependencies)invokes compute, memoizes the calculation result, and returns it to the component. The useMemo will only recompute the memoized value when one of the dependencies has changed. This optimization helps to avoid expensive calculations on every render. If during the next renderings the dependencies don’t change, then useMemo() doesn’t invoke compute but returns the memoized value.

Remember that the function passed to useMemo runs during rendering. Don’t do anything there that we wouldn’t normally do while rendering. For example, side effects belong in useEffect, not useMemo.

The dependencies act similar to arguments in a function. The dependency’s list is the elements useMemo watches: if there are no changes, the function result will stay the same. Otherwise, it will re-run the function. If they don’t change, it doesn’t matter if our entire component re-renders, the function won’t re-run but instead return the stored result. This can be optimal if the wrapped function is large and expensive. That is the primary use for useMemo. If our function uses props or states values, then be sure to indicate these values as dependencies. If no array is provided, a new value will be computed on every render. We may rely on useMemo as a performance optimization, not as a semantic guarantee.

There are two problems that useMemo seeks to address: referential equality, and computationally expensive operations.

In the future, React may choose to “forget” some previously memoized values and recalculate them on the next render, e.g. to free memory for offscreen components.

As advice Write our code so that it still works without useMemo — and then add it to optimize performance.

Note: The array of dependencies are not passed as arguments to the function. Conceptually, though, that’s what they represent: every value referenced inside the function should also appear in the dependencies array. In the future, a sufficiently advanced compiler could create this array automatically.

We recommend using the exhaustive-deps rule as part of our eslint-plugin-react-hooks package. It warns when dependencies are specified incorrectly and suggests a fix.

Example:

The following example is simple, just for understanding how to use useMemo :

Every time we change the input value, the factorialResult is calculated, and 'calculateFactorial(number) called!' is logged to console.

On the other side, each time we click Increment button, inc state value is updated. Updating inc state value triggers <MyComponent /> re-rendering. But, as a secondary effect, during re-rendering, the calculateFactorialis recalculated again'calculateFactorial(n) called!' is logged to console.

By using useMemo(()=> calculateFactorial(number), [number]) instead of simple calculateFactorial(number), React memoizes the factorial calculation.

Every time we change the input value, the 'calculateFactorial(n) called!' is logged to console, if we click Increment button, the 'calculateFactorial(n) called!' is not logged to console because useMemo returns the memoized factorial calculation.

I advise the readers for courses with online degrees from European universities, many of them are free.

Big Note:

While useMemo() can improve the performance of the component, we have to make sure to profile the component with and without the hook. Only after that make a conclusion whether memoization is worth it.

When memoization is used inappropriately, it could harm the performance.

why React’s useMemo Hook isn’t the default for all value computations in the first place?

Internally React’s useMemo Hook has to compare the dependencies from the dependency array for every re-render to decide whether it should re-compute the value. Often the computation for this comparison can be more expensive than just re-computing the value.

The conclusion: useMemo(() => computation(a, b), [a, b]) is the hook that lets us memoize expensive computations. Given the same [a, b] dependencies, once memoized, the hook is going to return the memoized value without invoking computation(a, b).

useCallback:

React’s useCallback Hook can be used to optimize the rendering behavior of our React function components.

const memoizedCallback = useCallback( () => { doSomething(a, b);},[a, b],);

useCallback is a hook in React that helps you optimize your component’s performance by memoizing functions. Memoization means that the function is saved and reused between renders, preventing unnecessary re-creations of the function.

We will go through an example to illustrate the problem first, and then solve it with React’s useCallback Hook. And notice this problem only happens with a functional component, not with the class-based component.

Example:

Let’s take look at the following popular example of a React application that renders a list of users and allows us to add and remove items with callback handlers.

Typing into the input field for adding an item to the list should only trigger a re-render for the App component, but when we type on input text all child components will rerender again, Please check console.log, we want to prevent every component from re-rendering when a user types into the input field. So we will use React.memo:

However, both function components still re-render when typing into the input field. For every character that’s typed into the input field, Please check console log:

// after typing one character:
Render: App
Render: List
Render: ListItem
Render: ListItem

Let’s take look at the props that are passed to the List component:

const App = () => {
return (
//...
<List list={users} onRemove={handleRemove} />
)

As long as no item is added or removed from the list prop, it should stay intact even if the App component re-renders after a user types something into the input field. So why this behavior happens.

Why this behavior happens!!!!!

Whenever the App component re-renders after someone types into the input field, the handleRemove handler function in the App gets re-defined. This is problem with pure functions inside function component, because with class component, it does not do these behaviors.

By passing this new callback handler as a prop to the List component, it notices a prop changed compared to the previous render. That’s why the re-render for the List and ListItem components happen.

We can use useCallback to memoize a function, which means that this function only gets re-defined if any of its dependencies in the dependency array change:

const App = () => {
...
const handleRemove = React.useCallback(
(id) => setUsers(users.filter((user) => user.id !== id)),
[users]
);
...
};

If the users state changes by adding or removing an item from the list, the handler function gets re-defined and the child components should re-render.

However, if someone only types into the input field, the function doesn’t get re-defined and stays intact.

Summary for useCallback:

• useCallback memoizes a function, preventing its re-creation on every render.
• Improves performance by avoiding unnecessary re-renders of child components relying on the function.
• It takes the function to memoize and a dependency array. The function is only recreated if one of the dependencies changes.

Why React’s useCallback Hook isn’t the default for all pure functions inside functions components?

React’s useCallback Hook has to compare the dependencies from the dependency array for every re-render to decide whether it should re-define the function. Often the computation for this comparison can be more expensive than just re-defining the function. That is why I suggest to use profiler API to check if we should use it or not.

In conclusion, React’s useCallback Hook is used to memoize functions. It’s already a small performance gain when functions are passed to others components without worrying about the function being re-initialized for every re-render of the parent component. As we have seen, React’s useCallback Hook starts to shine when used together with React’s memo API.

Should we Memoize

React is plenty fast for most use cases. If our application is fast enough and we don’t have any performance problems, so it is okay not use Memoization. Solving imaginary performance problems is a real thing, so before we start optimizing, make sure you are familiar with React Profiler.

React 16.5 adds support for a new DevTools profiler plugin. This plugin uses React’s experimental Profiler API to collect timing information about each component that’s rendered in order to identify performance bottlenecks in React applications. It will be fully compatible with our upcoming time slicing and suspense features.

If We’ve identified scenarios where rendering is slow, memoization is probably the best bet.

Conculsion:

The useMemo is used to memoize values, React.memo is used to wrap React Function components to prevent re-renderings. The useCallback is used to memoize functions. I hope if you like the article to applaud & follow me to get notification about new articles.

If you enjoy reading the article and want to support me as a writer, you can buy me a coffee!

If you want to Dive into How to detect memory leaks using heapdump, snapshots, and profiler in nodejs/react/javascript and V8 engine, I advise you with the following Course.

If you want to learn best practices for testing your apps with Jest and React Testing Library, I advise you with the following Course.

React 18:

The Foundational Update to Core Rendering model React 18

Important Annoucement: 14 March 2024:

React 19 updates:

In React version 19, a compiler has been introduced that handles all essential re-renders during state changes. This means React developers will no longer need to wrap their code inside useMemo or useCallback to prevent unnecessary re-renders.