Application scenarios

  1. UseEffect is asynchronous: 90% of scenarios use useEffect, which is executed at the end of each DOM rendering round and after the browser has executed the drawing.
  2. UseLayoutEffec is a synchronous operation: It calls effect synchronously after all the Dom renders, but it does so before the browser executes the drawing. Executing the update plan inside useLayoutEffect will block the browser from synchronously updating the Dom after the drawing, which is mainly used to read the Dom layout or style and synchronously trigger the rerender.

useEffect

Most of the time, this effect is executed after the DOM has rendered and the browser has rendered. This effect can be manually controlled.

  • The first parameter is the callback function, which has the useEffect internal and external definitions. Note that the external definition is wrapped in the useCallback.
  • Second parameter dependency array: there are three cases, A. This dependency is not needed, B. If the dependency array is empty [], C. An internal state or props of the dependency array component.
  • Return (clear function) : This is optional and is executed before useEffect executes a second time.

useLayoutEffect

The use of useEffect is the same as that of useEffect, except that it is executed at a different time and, like its name, can be used when updating the DOM to retrieve the layout or style of the DOM itself. Official recommendations are not necessary.