Interviewer: the difference between useEffect and useEffect

UseLayoutEffect is asynchronous, useLayoutEffect is synchronous, which will satisfy the interviewer. We need to be clear about when they are called in the source code.

Let’s start with an example: if the state before count is 0 after the update is triggered, we randomly generate a number, block for a while, and set the count bit to a random value. Let’s see how useEffect and useLayoutEffect differ

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

export default function App() {
  const [count, setCount] = useState(0);
  
  // Try using useLayoutEffect
  useEffect(() = > {
    if (count === 0) {
      const randomNum = Math.random() * 100;// Generate a random number

      const now = performance.now();

      while (performance.now() - now < 100) {// block for a while
        console.log('blocking... ');
      }

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

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

// In the case of useEffect, constantly clicking triggers updates, occasionally showing 0
// In the case of useLayoutEffect, constantly clicking triggers the update and does not accidentally show 0
Copy the code

In the source code, there is a phase called the COMMIT phase, which is responsible for handling hook functions, lifecycle, traversing the EffectList generated by the Render phase, and applying the Fiber node with side effects to the real node. If you are not familiar with the Render phase, you can refer to the previous article render phase. The following figure is the structure of the commit phase source code, and we will explain it in detail.

The commitRootImpl functions are divided into three main parts:

Commit phase pre-work
Mutation stages
1. Call commitBeforeMutationEffects, scheduleCallback flushPassiveEffects scheduling execution
2. CommitMutationEffects are called to handle the associated side effects, and the destruction function that operates on the real node useLayoutEffect is executed in this function
3. Call commitLayoutEffects, call the callback function of commitLayoutEffects, at which point the side effects have already been applied to the real node, so you get the latest node.
4. The useEffect destruction function and callback function are executed in flushPassiveEffects after the commit phase.
Commit phase closure

So useLayout/componentDidMount useEffect and what is the difference?

Answer: they are in different time to perform the commit phase, end useEffect during the commit phase asynchronous invocation, useLayout/componentDidMount synchronous invocation

Detailed source code debugging video (efficient learning) :Click on the learning

React source code

1. Introduction and questions

2. React design philosophy

React source code architecture

4. Source directory structure and debugging

5. JSX & core API

Legacy and Concurrent mode entry functions

7. Fiber architecture

8. Render phase

9. The diff algorithm

10. com MIT stage

11. Life cycle

12. Status update process

13. Hooks the source code

14. Handwritten hooks

15.scheduler&Lane

16. Concurrent mode

17.context

18 Event System

19. Write the React mini

20. Summary & Answers to interview questions in Chapter 1

Interviewer: the difference between useEffect and useEffect