Скачать или смотреть Preventing Unnecessary Re-Renders in React with React.memo()

Learn how to manage re-renders in React components effectively and understand the role of `React.memo()` in rendering performance optimization.
---
This video is based on the question https://stackoverflow.com/q/66464471/ asked by the user 'metichi' ( https://stackoverflow.com/u/7795048/ ) and on the answer https://stackoverflow.com/a/66464614/ provided by the user 'thedude' ( https://stackoverflow.com/u/270592/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Does changing the props of a child always re-render the parent even with React.memo?

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Understanding Re-Renders in React: The Case of React.memo()

Introduction

In the world of React, performance is key. One common problem developers face is unnecessary re-renders of components. Particularly, when using modal elements that should not re-render every time their parent updates, a crucial question arises: Does changing the props of a child always re-render the parent, even when using React.memo()?

In this guide, we will delve into this question, specifically exploring how the use of React.memo() impacts re-rendering in React components. Let's break it down step-by-step.

The Scenario

Imagine that you have a modal component in your React application. This modal is controlled by the parent component, which handles the state of the ingredients in a burger builder application. The parent component, BurgerBuilder, alters its state but you want to prevent the modal from re-rendering whenever it changes. Here’s a brief overview of the relevant code snippets:

Modal Component: Managed by React.memo() to try and prevent unnecessary renders.

BurgerBuilder Component: Updates the state of ingredients but expects the modal not to re-render.

The Problem

When you change one of the props passed to the Modal, especially the implicit children prop, it leads to a re-render of that component, despite the intention to optimize using React.memo(). The following points summarize the core of the issue:

Change Triggers Re-Render: React.memo() only prevents re-renders if the same props are passed to the component. Implicitly changing the children prop, i.e., the OrderSummary inside the Modal, will still cause a re-render.

The Explanation of React.memo()

To understand this better, let's clarify what React.memo() does. This higher-order component:

Performance Optimization: It prevents a functional component from re-rendering if its props have not changed.

Shallow Comparison of Props: Only props specified in the component are compared. If they remain unchanged, the component does not re-render.

Why the Modal Re-Renders

In our specific case, when the BurgerBuilder alters the ingredient state, it triggers a change in the children prop being passed to the Modal. This is the crux of the problem:

Changing ingredients might indirectly change what is rendered inside the Modal (the children prop).

Since React.memo() does a shallow comparison on props, the change in children triggers a re-render where it really shouldn't in the ideal case.

Solution Approaches

So, how can we mitigate this issue? Here are some practical strategies:

Avoid Implicit Changes: Use explicit props for the Modal to ensure they don't change if only other states update.

Memoize Children Props: If children are complex, consider memoizing them as well to ensure they don't change unnecessarily.

Refactor Component Structure: Ensure that components that don’t need to know about certain states are separated.

Conclusion

Using React.memo() effectively can enhance your application’s performance, but it requires a clear understanding of how props and re-renders work in React. Always remember that while React.memo() can prevent unnecessary renders of the component itself, any changes to props, especially implicit ones, can still ignite re-renders.

Takeaway

The key takeaway is: Manage your props wisely! If props are changed, a re-render will occur even if using React.memo(). Always consider refactoring or memoization tactics to achieve the desired performance in your React applications.