How to avoid FOUC for new element in the page

[Kimbly]

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

[Carl]

I'm not 100% sure the order of things in React, but the short story is you probably need a css rule to hide the element (visibility:hidden) when its first rendered. More info here: 

 

[Kimbly]

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

[Kimbly]

Have you any codesandbox for React add todolist animation using hook

[ZachSaucier]

20 hours ago, Kimbly said:

the element show after I click the button

You need to apply the styles to hide the object sometime before the element is first displayed. If the button click is adding styles to show it, then you should attach to that listener and hide it instead.

 

20 hours ago, Kimbly said:

Have you any codesandbox for React add todolist animation using hook

If you make a minimal demo of your issue in CodeSandbox we're happy to help.