Performance degradation in antd with cssinjs compared to v4

[pbrzosko]

Hi,

we are getting a quite significant performance degradation in our virtual scrolled component with a lot of Antd components inside. Below are screeenshots of FF profiler with cssinjs (antd v5) and without (antd v4). It seems like the bottleneck here is the useToken -> useCacheToken -> useGlobalCache code. In Chrome it seems updateCSS to be the issue.

1. Can you give more details, why CSS needs to be updated when we are scrolling virtual container? It seems to me that could be avoided, as nothing is changed with the component - it is just mounted / unmounted?
2. Can you give some hints about how to improve the performance. For now our component is not usable.

Ant5 - see the red Jank stripes

Ant4

[pbrzosko]

Also we use one theme instance and everything is constant in it - I think those component styles should be generated once and added to the page and that's it.
Why it has to be constantly updated? What is being changed there?

Also, we tried extracting styles to a file as described here: https://ant.design/docs/react/server-side-rendering, but this didn't help.

[pbrzosko]

Any progress on this one?

[saneksa]

@pbrzosko We've been having the same problem