React React Memo And Usememo Complete Guide

Understanding React.memo

React.memo is a higher-order component that helps in memoizing components so that they only re-render when their props have changed. It can provide performance optimizations as it avoids unnecessary renders of functional components.

Example:

Let's create a simple application to understand how React.memo works.

1. Create a React Application: First, create a new React app using Create React App.

   npx create-react-app react-memo-example
   cd react-memo-example
   

2. Modify App.js: Open the src/App.js file and modify it to include an example that demonstrates the usage of React.memo.

   import React, { useState } from 'react';
   import ChildComponent from './ChildComponent';
   
   function App() {
       const [value, setValue] = useState(0);
       const [name, setName] = useState('John Doe');
   
       return (
           <div>
               <h1>React.memo Example</h1>
               <button onClick={() => setValue(value + 1)}>
                   Increment Value
               </button>
               <button onClick={() => setName(name === 'John Doe' ? 'Jane Doe' : 'John Doe')}>
                   Toggle Name
               </button>
               <ChildComponent value={value} name={name} />
           </div>
       );
   }
   
   export default App;
   

3. Create ChildComponent.js: Now, let's create a child component and use React.memo to optimize it.

   import React from 'react';
   
   function ChildComponent({ value, name }) {
       console.log(`ChildComponent Rendered - Value: ${value}, Name: ${name}`);
       return (
           <div>
               <p>Value: {value}</p>
               <p>Name: {name}</p>
           </div>
       );
   }
   
   export default React.memo(ChildComponent);
   

In this setup, ChildComponent will only re-render if either its value or name props change. If you toggle the name, it will re-render because the prop name is changing. However, if you increment the value, it will still re-render because the prop value is changing.

To prevent the component from re-rendering for every single prop change (only those necessary), we can add a custom comparison function as the second argument to React.memo.

Example with Custom Comparison Function:

import React from 'react';

function ChildComponent({ value, name }) {
    console.log(`ChildComponent Rendered - Value: ${value}, Name: ${name}`);
    return (
        <div>
            <p>Value: {value}</p>
            <p>Name: {name}</p>
        </div>
    );
}

// Custom comparison function for memoization
function arePropsEqual(prevProps, nextProps) {
    return prevProps.value === nextProps.value; // Only re-render if value changes
}

export default React.memo(ChildComponent, arePropsEqual);

Now, when you increment value the component will re-render, but when you toggle name, the component will not re-render.

Understanding useMemo

useMemo is a hook that lets you memoize a value so that it doesn't recalculcate unless one of its dependencies changes. It can be particularly useful when recalculating a value is expensive and you want to avoid doing it during every render.

Example:

We'll modify our previous example to demonstrate useMemo.

1. Modify App.js to Use useMemo:

   import React, { useState, useMemo } from 'react';
   import ChildComponent from './ChildComponent';
   
   function App() {
       const [value, setValue] = useState(0);
       const [name, setName] = useState('John Doe');
   
       // Recalculating an expensive operation
       const isOdd = useMemo(() => {
           console.log("Calculating if Value is Even/Odd");
           return value % 2 !== 0;
       }, [value]); // Only recalculate if 'value' changes
   
       return (
           <div>
               <h1>useMemo Example</h1>
               <button onClick={() => setValue(value + 1)}>
                   Increment Value
               </button>
               <button onClick={() => setName(name === 'John Doe' ? 'Jane Doe' : 'John Doe')}>
                   Toggle Name
               </button>
               <p>{`Is the Value Odd? ${isOdd ? 'Yes' : 'No'}`}</p>
               <ChildComponent value={value} name={name} />
           </div>
       );
   }
   
   export default App;
   

In this enhanced example, the isOdd calculation will only happen when the value changes. When you toggle the name, the calculation will not be performed again, as the dependency on value hasn’t changed.

Summary

• React.memo: Prevents unnecessary re-renders of components by comparing incoming props to its previous props.
• useMemo: Helps in preventing unnecessary recalculations of expensive computations by storing the calculated value and recalculating only when its dependencies change.

By combining these tools, you can ensure better performance in components that require a lot of computation or re-render frequently.

Running The Code

After setting up your App.js and ChildComponent.js files, run your application to see React.memo and useMemo in action.

npm start

This will start the development server, and you can open your browser to see your React components in action!