cx with many combinations of conditional classes in React

[mbmx10]

Hello! We are currently migrating our React app from @mui/styles to tss-react/mui. In one of our central components we observe a massive performance drop. The component returns something like the following

<MyComponent
  className={cx({
   [style1]: props.flag1,
   [style2]: props.flag2,
   [style3]: props.flag3,
   [style4]: props.flag4,
   [style5]: props.flag5,
   [style6]: props.flag6,
   [style7]: props.flag7,
   [style8]: props.flag8,
   [style9]: props.flag9,
   [style10]: props.flag10,
   [style11]: props.flag11,
   [style12]: props.flag12,
   [style13]: props.flag13,
   [style14]: props.flag14,
   [style15]: props.flag15,
   [style16]: props.flag16,
   [style17]: props.flag17,
   [style18]: props.flag18,
   [style19]: props.flag19,
   [style20]: props.flag20,
   [style21]: props.flag21,
   [style22]: props.flag22,
   [style23]: props.flag23,
   [style24]: props.flag24,
   [style25]: props.flag25,
  })} >
  {children}
</MyComponent>

where the styles are generated using four separate invocations of makeStyles from tss-react/mui and the combination of flags do vary. With @mui/styles and classNames perfomance was no issue. But now the app gets near to being unusable. While I can imagine, that the emotion cache is overwhelmed due to the amount of occuring combinations, I am wondering, if the drop in performance is obvious and wether there might be a straight forward solution in this situation.

I'm grateful for any kind of help on this matter.

[garronej]

Hello @mbmx10,

Thanks for reaching out.
Can you try version 4.8.5-rc.0 of tss-react that I just released. See if it improves perfomances.

Thank you

[garronej]

Could it be promising to combine them in a single makeStyles-call?

I don't think it would improve performance significantly. (I'm pretty sure it wont).

Can you try 4.8.5-rc.4 and see if it improve things?

[mbmx10]

I tried 4.8.5-rc.4 without seeing any improvements.

[garronej]

Then I'm afraid we just established it's not tss-react code that causes the perfomances issue but it comes down to emotion perfomance.
That's disapointing.
Without seeing the code I've exausted my options...

[mbmx10]

I see. Thanks a lot for having a look! We might try to cache the results from the useStyle hooks and see if this helps. We are not making use of parameterized styles after all.

[garronej]

Unfortunately everything is memoized already but I'm all ears if you manage to find a solution somehow.