React has detected a change in the order of Hooks called by EmotionCssPropInternal

Current behavior:

When using a conditional css which consumes theme, the following React error is produced when the condition changes from false to true:

React has detected a change in the order of Hooks called by EmotionCssPropInternal

To reproduce:

https://codesandbox.io/s/emotion-issue-template-forked-ettgx?file=/src/index.js

In particular, the line

<Title css={toggle && toggledCss}>

when toggle changes from false to true, the error above is produced. It only happens the first time it’s toggled, I assume this is because the css or resulting wrapped component is cached somewhere? – not sure and not sure if relevant. I did some digging in Emotion and found the offending line to be this one. This line also hinted at a potential solution:

<Title css={[toggle && toggledCss]}>

Now… I’m not really sure which styles of css usage are supported. The documentation is lacking in this regard and much of our usage is inferred from TypeScript types. So really, my question is: if this is invalid, how should I write something like this? A less contrived example might be conditionally applying hover, active, etc states depending on whether or not a button is disabled.

Expected behavior:

If this style is in fact supported, no React warning should be produced.

Environment information:

• react version: 16.8.6+
• @emotion/react version: 11.0+

[Andarist]

Sorry for the delay - I hope to merge the mentioned PR this week. Didn’t have much time last week to get to this.

[AlexanderArvidsson]

I just ran into this issue in our platform, except for me the same problem occurs regardless if I use an array and always on initial render, even if the condition does not change (I tested with a constant).

Quickly looking at the line that @tills13 found, it seems to me that this line breaks the first Rules of Hooks, namely that hooks should never be called conditionally.

Looking forward to get the PR merged, I will make the change as a patch and try it out myself as well. Edit: Yep, seems like it did the trick, still curious if this was done merely as a premature optimization or if there is a big performance difference.