[How to avoid FOUC for new element in the page]

Have you any codesandbox for React add todolist animation using hook

[How to avoid FOUC for new element in the page]

thanks you but I this video seem not work for my problem because the element show after I click the button. maybe React setState and map function in renturn () was call and after that gsap call. if I am correct  this video  solve for first load page

[How to avoid FOUC for new element in the page]

Hi, I just begin use this tools but I face the problem that if I have code like this

 const items = React.useRef([]);
const [arr, setArr] = React.useState([1,2,3])


React.useEffect(() => {
   items.current = items.current.slice(0, arr.length);
      const lastItem = items.current[items.current.length - 1];

      tl.from(lastItem, 0.6, {
        x: -500,
        ease: Power3.easeInOut,
        autoAlpha: 0,
      });
})

function addNewEl() {
  arr.push(4)
	setArr(arr)
}

arr.map((n, i) => {
  return (
	<div ref={el => selectedEl[i] = el}>{n}</div>
  )
})
<button onClick={addNewEl}>Add</button>

the problem is when I click add button the element is show before animate like a flashing please help me. Thanks