Interviewer: the difference between uselayouteffect and useeffect

interviewer :useLayoutEffect and useEffect The difference between

hello, This is Xiaochen , Have you ever encountered such a problem during the interview ,useLayoutEffect and useEffect What's the difference , You may answer useEffect It's asynchronous ,useLayoutEffect It's synchronous , The interviewer will be really satisfied with this answer , We need to make it clear when they are called in the source code .

So let's do an example ： After clicking trigger update , If count The previous state was 0, We randomly generate a number , After blocking for a period of time , Set up count Bit random value , Look at the useEffect and useLayoutEffect What's the difference between the two cases

import React, { useLayoutEffect, useState, useEffect } from "react";

export default function App() {
  const [count, setCount] = useState(0);

  // use  useLayoutEffect  try 
  useEffect(() => {
    if (count === 0) {
      const randomNum = Math.random() * 100;// I'm going to randomly generate a number 

      const now = performance.now();

      while (performance.now() - now < 100) {// Block for a period of time 
        console.log('blocking...');
      }

      setCount(randomNum);// Reset the status , Set to random number 
    }
  }, [count]);

  return <div onClick={() => setCount(0)}>{count}</div>;
}

// stay useEffect Under the circumstances , Keep clicking to trigger updates , Occasionally 0
// stay useLayoutEffect Under the circumstances , Keep clicking to trigger updates , Not occasionally 0

In the source code, no matter when rendering or updating for the first time, it will go through a stage called commit Stage , The main work in this stage is to deal with some hook functions 、 Life cycle 、 Traverse render It's formed in stages EffectList Linked list , Will have side effects Fiber Apply nodes to real nodes , If the render If you don't understand this stage, you can refer to previous articles render Stage , Here is the graph commit Structure diagram of phase source code , Let's explain in detail .

stay commitRootImpl The function of is mainly divided into three parts ：

• commit Stage pre work
• mutation Stage

1. call commitBeforeMutationEffects,scheduleCallback Scheduling execution flushPassiveEffects
2. call commitMutationEffects, Dealing with related side effects , Operate on real nodes useLayoutEffect The destruction function of the is executed in this function
3. call commitLayoutEffects, call commitLayoutEffects Callback function for , At this time, the side effects have been applied to the real nodes , So you can get the latest node .
4. stay commit After the end of the phase flushPassiveEffects perform useEffect Destruction function and callback function .

• commit Phase closeout

therefore useLayout/componentDidMount and useEffect What's the difference ？

answer ： They are commit Different stages, different timing ,useEffect stay commit End of phase asynchronous call ,useLayout/componentDidMount A synchronous invocation

Detailed source debugging video （ Efficient learning ）: Click to learn

In the past react Source code analysis article ：

1. Introduction and interview questions

2.react Design concept of

3.react Source architecture

4. Source directory structure and debugging

5.jsx& The core api

6.legacy and concurrent Pattern entry function

7.Fiber framework

8.render Stage

9.diff Algorithm

10.commit Stage

11. Life cycle

12. Status update process

13.hooks Source code

14. Handwriting hooks

15.scheduler&Lane

16.concurrent Pattern

17.context

18 The event system

19. Handwritten mini version react

20. summary & The answers to the interview questions in Chapter one