Understanding Why React.Memo() Keeps Rendering My Component

Описание: Discover why your React components are re-rendering when using `React.memo()`, even when you think they shouldn't. Learn about shallow vs. deep comparisons and how to optimize your components!
---
This video is based on the question https://stackoverflow.com/q/73038385/ asked by the user 'Amr Khaled' ( https://stackoverflow.com/u/8422197/ ) and on the answer https://stackoverflow.com/a/73038544/ provided by the user 'Milos Pavlovic' ( https://stackoverflow.com/u/19397457/ ) 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: Why React.Memo() keeps rendering my component

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 Why React.Memo() Keeps Rendering My Component

When working with React, one common optimization technique is the use of React.memo(), which prevents unnecessary re-renders of components. However, many developers encounter situations where their components still re-render unexpectedly. A common question that arises is: Why does React.memo() keep rendering my component, especially when passing arrays or objects as props?

The Problem Explained

In a recent example, a developer noticed that when they passed a string from a parent component to a child component, the child did not re-render unnecessarily. However, when passing an array from the parent to the child, the child component re-rendered every time. This raised a crucial question:

Is this behavior related to JavaScript's reference and primitive value types?

Let's take a closer look at what’s happening under the hood.

Understanding Props in React

Primitive vs. Reference Types:

Primitive Values: These are values like strings, numbers, and booleans. When passed as props, if the value doesn’t change, React can effectively skip re-rendering.

Reference Values: Objects and arrays are reference types. Each time you create a new object or array, even if they hold the same data, a new reference is created, leading to unexpected re-renders.

The Role of React.memo()

What Does React.memo() Do?

React.memo() is a higher order component that will memoize the result, and prevent re-rendering the child component unless the props have changed. However, by default, React.memo() performs a shallow comparison for props, which means:

Shallow comparison: Only compares the first level of properties. If the reference of an object or an array changes, the component will re-render.

Why Your Component Keeps Re-rendering

When you pass an array or object, every time the parent renders, if you create a new array or object even with the same data, React.memo() detects a change in reference and the child component re-renders.

When you pass a string, the primitive value remains the same during re-renders as its value doesn't create a new reference.

A Deep Dive into Solutions

Custom Equality Function

To optimize your component using React.memo(), you can provide a custom comparison function as the second argument to React.memo(). This function can be used to do a deep comparison of props:

[[See Video to Reveal this Text or Code Snippet]]

This will prevent unnecessary re-renders by ensuring that only when the actual contents change, the component will update.

Utilizing useMemo()

Another approach is to stabilize the props you pass down from the parent component using the useMemo hook, which memoizes the value and returns the same reference until its dependencies change.

Example:

[[See Video to Reveal this Text or Code Snippet]]

Using useMemo ensures that the reference remains stable, reducing the frequency of re-renders in child components.

Conclusion

In summary, React.memo() is indeed a useful tool for optimizing component rendering in React. However, its functionality heavily relies on the type of values you pass to components.

Strings and other primitive types work as expected because they maintain the same reference.

Objects and arrays can lead to unexpected behavior due to their reference-based nature.

By implementing either a custom equality function or using useMemo, you can fine-tune your component rendering and take full advantage of React.memo().

Now that you understand why and how React.memo() behaves this way, go ahead and experiment with your components! If you have further questions or need clarification, feel free to ask.