React best practice in terms of browser performance

[andoivrjrev]

Hey guys,

 

I have a question according to GSAP Scolltrigger and React.

It's my first Next.js/React project so I need some advice according to general best practice.

I have quiet a few different components and want to animate in elements when they are in viewport.

Is it better - in terms of browser performance - to query selector all elements based on e.g. a css class in a useEffect hook at my root component or do all logic in every component itself with a ref for example?

I hope this question is not too much out of topic and somebody more experienced can give advice :).

 

Thanks a lot!

[Rodrigo]

Hi,

 

Performance is a really deep topic and could depend on far too many things. On top of that framework specific optimizations will also depend on what you're trying to do and the way said particular framework works.

 

If you're just getting started with React and GSAP I'd strongly recommend you to go through the resources in this page:

As for selectors, is better to use GSAP Context (as shown in those articles) and take advantage of the scoping parameter you can pass to the Context callback. That will tell GSAP to look for elements with the selector text you pass within that element and not the entire document, which of course will have a positive impact overall. If that impact will be noticeable or not, again, it will depend on many factors.

 

If you have any other question remember to include a minimal demo. Here are our starter template collections for React and Next:

https://stackblitz.com/@GreenSockLearning/collections/gsap-react-starters

https://stackblitz.com/@GreenSockLearning/collections/gsap-nextjs-starters

 

Hopefully this helps.

Happy Tweening!