preface

I did a requirement and found that there was a secondary rendering. Note here the difference between useEffect and useEffect

Let’s take a look at some code

What is the printing order? You can guess by yourself.

useEffect

The official definition of

Changing the DOM, adding subscriptions, setting timers, logging, and performing other side effects within the body of a function component (in this case, during the React rendering phase) are not allowed, as this can cause unexplained bugs and break UI consistency.

In layman’s terms

UseEffect is essentially giving function components a life cycle.

UseEffect execution time

The official definition of

Unlike componentDidMount and componentDidUpdate, the function passed to useEffect is called in a delayed event after the browser has laid out and drawn. This makes it suitable for many common side effect scenarios, such as setting up subscriptions and event handling, because most actions should not block browser updates to the screen.

In layman’s terms

Whether in an interview or on the job. If someone asks you how useEffect simulates the life cycle. You will answer them without thinking

  • The second argument passes an empty array, mimicking componentDidMount

  • The second parameter passes the dependency, mimicking componentDidUpdate

  • The second argument passes an empty array and calls a method in the form of a return, simulating componentWillUnmount

However, do you have any idea about the execution order of useEffect? If both parent and child components exist, which useEffect goes first?

Look at a piece of code

The results of

Why does the child component useEffect go first?

Analysis of the

We all deserve the useEffect to be executed after the commit. What is the commit phase of React? In a nutshell, you render the DOM onto the page. Can we assume that the useEffect is triggered after the page has been rendered?

According to this execution logic:

  • The parent component enters the COMMIT phase and finds a Son component that needs to be rendered.

  • Son’s life cycle starts, Son enters the COMMIT phase, useEffect of child components is executed, and Son rendering ends

  • The parent component performs the commit phase, rendering is complete, and useEffect is executed

useLayoutEffect

The official definition of

Its function signature is the same as useEffect, but it calls Effect synchronously after all DOM changes. You can use it to read DOM layouts and trigger rerenders synchronously. The update schedule inside useLayoutEffect is refreshed synchronously before the browser performs the drawing

Popular speaking

UseLayoutEffect is executed synchronously with componentDidMount. It is executed before the COMMIT phase, in a better order than useEffect

Execution order

UseEffect and useEffect difference

UseEffect change value

  • Benefits do not block render updates on the browser screen

  • The downside is secondary rendering and poor user experience

Can’t do giFs… Try it yourself…

It’s gonna blink, it’s gonna show you the initial value, click on the initial value, change it to I changed, change it to I changed again, okay? The user experience is very bad.

UseLayoutEffect change value

  • The benefit is executed synchronically with componentDidMount without causing a secondary rendering

  • The downside may block rendering updates on the browser screen

The first thing the page shows is the initial value, click on the initial value, change it to I changed again

An execution diagram of the original code

It may be a shallow understanding. I will revise this article if I have a better understanding later