Perf issues on complex component

[Jsalies]

🤓 Question

First of all, I must say that I am amazed by what react spring can do. It is easy to use, easy to understand.

Here is my issue / questionning:
I am currently working on a react / react-spring calendar. I am trying to animate each day in a calendar. To do so, I used "Transition" on each day. Unfortunately, I am encountering a huge performance issue each time that I change the month / year.

On firefox, each time I change the targeted month, fps go down to 5 fps during the whole animation.

here is a simple sandbox of my project : here

My questions 👍

• is animating 42 elements in same time to much?
• how could we do to optimize performances? (change from Transition to another animation component?)
• perhaps I just don't get the way to think components with react-spring so should I rethink my component in another way?

Thank you for your time.

[epolderman]

Usually when writing a date selector component, or at least in my experience, it needs virtualization, no matter how optimized the animation library is.
https://github.com/bvaughn/react-window

FF does have a different rendering engine than Chrome as well, which is Gecko.
You could profile your application and see that which part of the pixel pipeline is eating up most of your frame. Is it the JS? Style Recalc? Layout? Paint? Composite? Determining which layer is eating most of your frame will narrow down your investigation a bit.

https://developers.google.com/web/fundamentals/performance/rendering/

[Jsalies]

Thank you, I never thought about something like virtualization or layer optimization. I will start to look deeper into these topics and try to optimize my work.