React Hook useEffect, useLayoutEffect

UseEffect, which means that after render ends, your callback will execute without blocking the browser rendering.

UseLayoutEffect, which executes the callback function synchronously after a DOM change, runs before the browser can do any drawing, blocking the browser’s drawing.

This is used when you need all the DOM changes to execute all the effects at the same time. It can be used to read the DOM and then trigger the rerender synchronously.

import React, { useEffect, useLayoutEffect, useRef } from "react";
import TweenMax from "gsap/TweenMax";
import './index.css'; const Animate = () => { const REl = useRef(null); */ 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

If useEffect is used, a flash appears