What Is React Memo? How To Use React Memo?

August 07, 2023
What is React Memo How to Use React Memo

Reach promises developers better performance and is designed to facilitate web developers with the tools to build faster web applications. However, its built-in performance optimizer doesn’t optimize an application in the best possible way, and often, it falls on us to optimize web applications for better performance.

react dev jobs

As it goes, among the most common and reliable ways to do so is using React Memo, which helps you minimize re-render count and boost the application load time considerably.

At its core, the command uses a caching technique called memoization that stores results or outputs of expensive functions to avoid recalls and needless re-renders.

What is React Memo?

With every prop or state value change, the components in react re-render. Even though it seems benign, this often needless habit dulls the performance of react applications, as even when the update is solely for the parent component, all its child components also get re-rendered needlessly.

To counter this, a higher-order component, React Memo, works best, whose function is to wrap around a component and memoizes the results to skip needless re-rendering.

Now, there are two ways to use React.memo(). You can either directly wrap the parent component or create a new variable that stores the memoized one and then exports it.

Let’s see the syntax behind the two methods:

Method # 1

const myComponent = React.memo((props) => {

    /* render using props */


export default myComponent;

Method # 2

const myComponent = (props) => {

    /* render using props */


export const MemoizedComponent = React.memo(myComponent);

When to Use React Memo?

Memoization works like a charm and helps reduce the re-render count, but that doesn’t mean you can go on an memoization spree and memoize everything.

It is a must to know when and which component to memoize else the fix becomes a burden. As we know, React Memo avoids needless re-renders when the state or context remains unchanged. Thus, memoizing a component whose state or context is constantly changing will have no impact as re-render is justifiable, and React Memo won’t curb it.


Similarly, there are a few more pointers to help you understand when it is justifiable to use React Memo:

1) When the component renders often and needlessly.

2) When it renders with unchanged props, like a child getting auto-rendered.

3) If your component is purely functional, or else use React.PureComponent.

4) If your component is loaded with UI elements and needs an equality check.

How to Use React Memo?

So, now you know what React Memo is and when to use it. To recap, use the feature when the component needlessly renders with the same props.

With that, let’s share how to use the feature. For simplicity, we have broken it down into three simple steps:

Step # 1 Import React and React.memo

import React from 'react';

Step # 2 Wrap the Component with React.memo

const MyComponent = React.memo((props) => {

  // Component logic here


Step # 3 Export the Memoized Component

export default MyComponent;

React Memo Component Example:

import React from 'react';

const MyComponent = React.memo((props) => {

  // Component logic here

  return <div>{props.data}</div>;


export default MyComponent;

In the example above, a functional component ‘MyComponent’ receives a ‘data’ prop. Wrapping it with React Memo memoizes its output and ensures it only renders when the ‘data’ prop is modified.

Customizing React Memo Behavior

In addition, React Memo component is also customizable. Customizing a React component requires defining the criteria on which it gets rendered. Let’s see how to do it with an example.

import React from 'react';

const MyComponent = React.memo((props) => {

  // Component logic here

  return <div>{props.data}</div>;

}, (prevProps, nextProps) => {

  // Custom comparison logic

  // Return true if the component should re-render, false otherwise


export default MyComponent;

In the example above, a custom comparison is passed as the second argument, which processes the previous and the next props and returns true to trigger a re-render and skips the re-render at false. Customizing the logic behind memoization gives us more flexibility and control and helps us ensure no needful re-renders get skipped and while all needless do.

Final Thoughts

React Memo is a top tool to optimize React web applications for performance and helps significantly curtail the load time by ensuring the application doesn’t re-render needlessly. It gives developers more control over their applications and the expensive rendering process.

Also Read: Understanding React SetState: Why And How To Use It?

react jobs



Candidate signup

Create a free profile and find your next great opportunity.


Employer signup

Sign up and find a perfect match for your team.


How it works

Xperti vets skilled professionals with its unique talent-matching process.


Join our community

Connect and engage with technology enthusiasts.