What is React.memo?

React.memo is a higher-order component (HOC) that prevents a component from re-rendering if its props haven’t changed. By using it, you can save processing power and speed up your React app, especially for components that render frequently.

Step 1: Create a Basic Functional Component

First, let's create a basic functional component that displays a count.

import React from 'react';

const **Counter** = ({ count }) => {
    console.log('Counter component re-rendered');
    return **<div>Count: {count}</div>**;
};

export default **Counter**;

Step 2: Use the Component in an App

Now, let's use this Counter component in our main app and see how it behaves.

import React, { **useState** } from 'react';
**import Counter from './Counter';**

const App = () => {
    **const [count, setCount] = useState(0);**

    return (
        <div>
            **<button onClick={() => setCount(count + 1)}>Increment Count</button>**
            **<Counter count={count} />**
        </div>
    );
};

export default App;

Step 3: Notice the Re-renders

Open your browser console and click the "Toggle Other State" button. You'll notice that the Counter component re-renders even though its count prop hasn't changed.

Step 4: Optimize with React.memo

To prevent unnecessary re-renders, wrap the Counter component with React.memo.

import React from 'react';

const **Counter = React.memo(({ count }) => {**
    console.log('Counter component re-rendered');
    return <div>Count: {count}</div>;
});

export default Counter;

Step 5: Test the Optimization

Now, click the "Toggle Other State" button again. You should see that the Counter component no longer re-renders when its props haven't changed, thanks to React.memo.

Implementing React.memo is straightforward and can lead to noticeable improvements in your app's performance. Give it a try and let me know how it worked !