Performance when using compound variants

[afzalsayed96]

Hoping to continue the discussion from discord here so others could chime in.

Problem Description

How far can we go with compoundVariants before we see a noticeable performance drop? Here's an example that creates 1296 compoundVariants for a component rendered many times.

Should the responsibility of keeping number of compoundVariants lower than a certain threshold lie on the user? Or can the library add optimizations to the logic so user doesn't have to care about this?

Snapshot from React profiler

Codesandbox Link

https://codesandbox.io/s/youthful-wind-i6r1u?file=/src/App.tsx

[afzalsayed96]

Was thinking about this issue and just want to check if anything has cleared up on the topic.
To be clear we have run into this problem in a real codebase and anyone generating variants from theme tokens will do as well.

I think it's acceptable if there's a one-time cost on component creation but this seems to happen on every rerender which is a bit of a concern for me. Wondering if we could do some optimisations to change things 🤔

cc @jonathantneal @peduarte

[peduarte]

We're aware of this and are re-working how the compound variant API works. Rest assured this will be fixed in the stable release 🔥