Shulou(Shulou.com)06/03 Report--

This article mainly explains "how to use useMemo", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's take you to learn "how to use useMemo"!

As a means of "performance optimization," useMemo is generally used to cache the calculation results of the performance consumption in the function component:

function App() { const memoizedValue = useMemo( () => computeExpensiveValue(a, b), [a, b] ); // ... }

The new memoizedValue is recalculated only after the dependency changes.

Have you ever wondered what would happen if useMemo cached the return value of a function component?

for example

We have a global context -- AppContext.

Because students are lazy, with the iteration of the project, the newly added context is selected to be placed in AppContext, resulting in more and more content contained in AppContext.

Now we have a Tree component that renders ExpensiveTree, a large component that consumes a lot of performance.

function Tree() { let appContextValue = useContext(AppContext); let theme = appContextValue.theme; return ; }

This component internally depends on the theme state in AppContext.

Because AppContext contains a lot of state unrelated to theme, every time other unrelated state is updated, Tree will be rerendered, and thus ExpensiveTree components will be rerendered.

Now that this optimization task is in your hands, what should you do?

Optimize ExpensiveTree

In this case, useMemo can come in handy:

function Tree() { let appContextValue = useContext(AppContext); let theme = appContextValue.theme; return useMemo(() => { return ; }, [theme]) }

We return ExpensiveTree as useMemo return value and theme as dependency.

Thus, even if AppContext changes cause Tree to render repeatedly, ExpensiveTree will only render after theme changes.

Principle analysis

To understand why this works, you need to understand three things:

What is the useMemo return value?

What is the return value of the function component

When does React render components?

Answer the first question: useMemo saves the return value of the first parameter (function) in the component's corresponding fiber, and only calls the first parameter (function) again to calculate a new value after the dependency (second parameter) changes.

Answer the second question: The return value of a function component is a JSX object.

Multiple calls to the same function component return multiple "different" JSX objects (JSX is a new reference even though props are unchanged).

Based on the above two answers, we can conclude that:

The above useMemo usage actually caches a complete JSX object in the fiber corresponding to the function component

The third problem is that function components need to satisfy the following conditions at the same time to not render:

1 oldProps === newProps

The two versions of the same word are "full."

2 Component context has not changed

3 workInProgress.type === current.type

Fiber.type does not change before and after component update, for example div does not change to p.

4 ! includesSomeLane(renderLanes, updateLanes)

There are no updates on the current fiber, or updates exist but have low priority.

For a more detailed explanation, please refer to this article: When is the React component rendered?

When we don't wrap the return value with useMemo, each Tree render returns a brand new JSX object.

So for ExpensiveTree, oldProps !== newProps。

Look at 2: ExpensiveTree internal context unchanged, satisfied

Look at 3: ExpensiveTree type before and after updating is ExpensiveTree, satisfying

Look again at 4: There is no status update in ExpensiveTree, satisfying

So, when we wrap ExpensiveTree with useMemo, the same JSX object is returned after each Treerender when theme is unchanged, satisfying the first rule.

For this reason, ExpensiveTree does not render.

At this point, I believe everyone has a deeper understanding of "how to use useMemo", so let's actually operate it! Here is the website, more related content can enter the relevant channels for inquiry, pay attention to us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.