React.memo: Optimizing React Functional Components

Introduction

In React, components re-render by default whenever their parent component re-renders. While this behavior ensures consistency, it can also lead to unnecessary renders, potentially affecting performance in larger applications. React.memo is a higher-order component (HOC) that helps optimize functional components by preventing unnecessary re-renders.

In this blog, we’ll explore what React.memo is, how it works, and when to use it effectively.

1. What is React.memo?

React.memo is a function that wraps a functional component and memoizes its output. If the props passed to the component remain unchanged between renders, React skips re-rendering the component and reuses the previously rendered output.

Basic Syntax:

const MemoizedComponent = React.memo(Component);

2. How Does React.memo Work?

React.memo performs a shallow comparison of the component’s props:

• If the props are the same as the previous render, the component is not re-rendered.
• If the props have changed (based on shallow comparison), the component is re-rendered.

Example: