Ternary `sx` statement with `undefined` causes component unmount/remount

[jonathanharrell]

Describe the bug
Let's say I have a basic React component:

const Test = (props) => {
  return (
    <div {...props}>{props.children}</div>
  );
};

And then I use sx on that component, swapping between an object and undefined based on some state:

<Test sx={someBoolean ? myStyles : undefined}/>

This causes the Test component to unmount/remount (along with any children it renders).

This is because when the sx prop is defined, Test is rendered inside EmotionCssPropInternal and when it's undefined, it's rendered on its own.

I don't believe this is the case when using emotion's css prop.

Expected behavior
EmotionCssPropInternal should wrap any component that uses sx prop, even if that prop value is undefined.

[lachlanjc]

Appreciate the report! Is this causing issues in your project? Or more like a "oh that's funky" that's not meaningfully slowing it down?

[hasparus]

I had been initially conflicted about handling sx prop set to undefined differently than missing sx prop.
However, I understand this remount can cause component state to be discarded resulting in a unexpected gotcha moment.

For now, could you an empty object {} instead of undefined?

[jonathanharrell]

Yes, I am using {} for now to resolve the issue. It was an unexpected behavior and took a while for me to track down what was causing component remounts, so I think at the very least it should be documented. Thanks for the response!