React uses effect and uses elayouteffect

useEffect

Almost 90% of the time, you should use this. This is after render, your callback is executed, but it doesn’t block Browser painting, sort of asynchronous, but class’s componentDidMount Synced with componentDidUpdate, run after render,useEffect performs better than class in most scenarios.

useLayoutEffect

This is used when working with the DOM. You need to use this when your useEffect operation needs to work with the DOM and change the style of the page. Otherwise, you may have flash screen problems. The callback function in useLayoutEffect executes immediately after the DOM update is complete, but runs before the browser can do any drawing, blocking the browser’s drawing.

Reference code is as follows: you can see the display effect (useLayoutEffect, no flash screen)

import React, { useEffect, useLayoutEffect, useRef } from "react"; import TweenMax from "gsap/TweenMax"; import './index.less'; const Animate = () => { const REl = useRef(null); UseEffect (() => {/* Move the box to 600px */ tweenmax. to(REl. Current, 0, {x: 600})}, []); return ( <div className='animate'> <div ref={REl} className="square">square</div> </div> ); }; export default Animate;Copy the code