What is React memo?

React is a JavaScript library that is used to create interactive and dynamic user interfaces. It divides the code into components, reducing redundancy and enhancing efficiency to maximize user experience. React memo is a React feature that helps us optimize our code.

In this answer, we will discuss React memo in detail.

React memo

React memo is a higher-order component that makes our React code more efficient. A higher-order component is a function that wraps around a component to provide additional features to it. While using React memo, we wrap our functional components in React.memo() function to stop continuous re-rendering of our component if it has not changed its state or props.

We can simply say it memoizes our component's result unless it has changed and displays the same output whenever the component is called. This helps us to avoid unnecessary re-rendering and improves the overall efficiency of our React application, making them faster and more efficient.

Syntax

There are two ways we can use React memo:

1. We call the React.memo function at the time of component declaration.

• MemoizedComponent: It refers to our functional component.

• React.memo: It refers to React memo function to make MyComponent memoized.

• props: It refers to the object we receive when our component is called by the parent component.

2. We call the React.memo function for our component and store it in a variable. then we use this variable with our export statement at the end.

• MemoizedComponent: It refers to the constant variable representing the memoized component.

• React.memo: It refers to the function which makes our MyComponent memoized.

• MyComponent: It refers to the component we want to memorize.

• export default MemoizedComponent: We export our MemoizedComponent as the default export of the module.

Coding Example

The following code example demonstrates how we can use React memo.

Let's understand what happens in ParentComponent:

• Line 1: We import all the necessary dependencies.

• Line 2: We import the ChildComponent.

• Line 5: We declare a use state called text.

• Lines 7–9: We define a function display which sets the value of text to a string that we want to display on the screen.

• Lines 10–12: We define a function hide which sets the value of text to null.

• Lines 14–19: We call our ChildComponent wrapped with React memo. We set the message prop for our ChildComponent. Then we create two buttons which display and hide a string.

• Line 12: We export the ParentComponent as the default export of the module.

Now let's understand what happens in ChildComponent:

• Line 1: We import the React.

• Lines 3–5: We declare a functional component called the ChildComponent. Then we wrap it with React.memo() so that unless the prop or component's state is changed, there won't be any re-rendering of our component. So whenever we click the display or hide button in the parent component, our child component will not be re-rendered as its props don't change.

• Line 7: We export the ChildComponent as the default export of the module.

Conclusion

React memo is an extremely helpful tool for optimizing functional components in our React applications. By wrapping a component with React.memo(), we can avoid constant re-rendering of our component if it receives the same props. This results in improved performance and is more suitable for complex components.