React Memo

React memo is a high-order component that allows you to optimize the performance of your React components by memoizing them. It helps prevent the re-rendering of a component when its props have not changed.

Key Benefits of React Memo:

One of the key benefits of using memo is that it can significantly improve the performance of your React components.

By memoizing your component, you can ensure that it only re-renders when its props have changed, reducing the number of unnecessary re-renders.

Another benefit of using a memo is that it makes it easier to write efficient and performant code. By wrapping your component in a memo call, you can let React take care of the memoization process for you.

A memo is particularly useful for functional components, which are stateless and rely solely on their props for rendering. When you use memo with a functional component, you can ensure that the component only re-renders when its props have changed.

To use memo, you simply need to wrap your component in a call to memo, passing it as a parameter. You can also provide a second parameter, which is a comparison function that will be used to determine whether the component should re-render or not.

Live Example: Simple Counter Component in react

Let’s take a look at an example to help you better understand how to use memo in React:
Say we have a simple counter component that takes in a count prop and displays the value on the screen:

Code-1: Re-renders every time:

import React from 'react';

const Counter = ({ count }) => {
  return <h1>Count: {count}</h1>;
};

export default Counter;

Output:

Output after incrementing it thrice:

Explanation:

This component will re-render every time the count prop changes, even if the actual value of the count hasn’t changed. This can lead to unnecessary re-renders and decreased performance.

This code exports a functional component called Counter. The component accepts an object prop as an argument and returns a h1 element with the string “Count: “.

Since this component doesn’t have any internal state, it’s a stateless component, also known as a functional component. Instead of using the class syntax, it uses a function to define the component. The function accepts props as an argument and returns JSX to render.

To fix this, we can use memo to memoize the component:

Code-2: Renders only when needed.

import React, { memo } from 'react';

const Counter = memo(({ count }) => {
  return <h1>Count: {count}</h1>;
});

export default Counter;

Initial Output:

Output after incrementing it thrice:

Explanation:

This code exports a memoized functional component named Counter. A memoized component is a component that remembers its previous rendering results, and will only update and re-render when its props change. The Counter component takes a single prop count and returns an h1 element displaying the current value of the count.

The memo function is a higher-order component that wraps the Counter component. It is used to optimize the rendering of Counter by preventing unnecessary re-renders when its count prop has not changed. It does this by memoizing the previous result of rendering Counter and only re-rendering it if the new count value differs.

The memo function is a way of optimizing React applications by reducing the number of times components are re-rendered. By wrapping a component with the memo function, the component will only re-render if its props have changed.

Conclusion:

In conclusion, React memo is a powerful and efficient tool for optimizing the performance of your React components. By memoizing your components, you can ensure that they only re-render when their props have changed.