How to optimize the performance of my onStart and other hooks when the state is changed in the onStart and other hooks

[spicylemon]

In react, when I use gsap.timeline().to, if I use setState to change the state in onComplete, the changed part will become a long task and cause lag. Can anyone help me think of a solution, onStart The same problem occurs

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen, Stackblitz or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best.

 

Here are some React starter templates you can fork.

 

Also, if you haven't done so already, I'd strongly recommend reading this article: 

 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[Rodrigo]

Hi @spicylemon,

 

The one thing that comes to mind in this scenario, without a minimal demo, is that the re-render caused by the state update plus the animation that is running could be causing this longer than anticipated/wanted tasks. Have you checked the React dev tools profiler to see how long that re-render takes? Have you tested in a simple dummy component with just one DOM element being animated and a single state property being updated? Have you tested the animation inside a memoized component that is not affected by the state update? In the last case the alternative would be to pass a callback to the memoized component with the animation in order to use that callback to instruct the parent component to update the state.

 

In this cases is better to isolate as much as possible and compare in order to see if the issue is actually caused by a running GSAP instance and the re-rendering or something else. For example in your image I can see a few SVG and a PNG, maybe a transparent PNG with shadows could be causing this. Sometimes SVG animations can be a burden to the CPU as well. As you can see there are a lot of options, that's why we ask for a minimal demo that clearly illustrates the problem.

 

Happy Tweening!