Import A custom hooks breaks animations, setState inside hook

[Luis Pizarro]

I have 2 components with scroll animations using the gasp scrollTrigger for react.

In one of the components I called a custom hook that setState just the window width, height(not a too complex hook) on useEffect

I notice that is the issue with the animation, because I remove the import of that hook, or even I remove the set state  in the hook and it works fine.

Any suggestions on why this is happening?

Bad

https://drive.google.com/file/d/1WZ7MdUXjqDFct39wLLcJOI1RAuI2lhfi/view?usp=sharing

Good
https://drive.google.com/file/d/14i6B-AxWRT64WlyO0mSUIkVI3hhlcobw/view?usp=sharing

 

[ZachSaucier]

Hey Luis and welcome to the GreenSock forums.

 

Could you please create a minimal demo of the issue using a platform like CodeSandbox? More about that here:

 

[elegantseagulls]

Without seeing a minimal demo, my guess is that something is causing the component to re-render, and if you aren't going proper garbage cleanup for that, you may run into issues.

[Luis Pizarro]

Now that you mention the rerender, I'll take a look. For now I tried with this demo https://react-3ir25l.stackblitz.io but the issue is not happening here, at least with the demo I ant to know if this is a correct way to handle the timeline?. Because that might be an issue too, I have a timeline on each component. Something else that might be important is that I'm using Next.js rendering on server side might cause issues? I use next/dynamic to render them on client side but not sure if either option affects or not.

 

 

Actually sometimes I get this error  DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node

[Luis Pizarro]

Guys I find the issue, thanks a lot mentioning that something might be causing a re-render make me focos on that.

On the component cleanup, we were calling  timeline.scrollTrigger.disable();

useEffect(() => {

console.log("mount1");

return () => {

timeline.scrollTrigger.disable();

console.log("unmount1");

};

},[]);

But on the useEffect we miss the [], so the component was mounting, unmounting, mounting. Causing that disable to run.

 

Also I had to run it on serverside, without that it keeps saying  DOMException: Failed to execute 'insertBefore' on 'Node':....