Invalid "Mutating `style` is deprecated." warning in 0.14.0-rc1?

I get the following warning in 0.14.0-rc1:

Warning: div was passed a style object that has previously been mutated. Mutating style is deprecated. Consider cloning it beforehand. Check the render of Preview. Previous style: {“color”:“#747474”,“backgroundColor”:“#009988”,“fontSize”:null,“fontWeight”:“300”}. Mutated style: {“color”:“#747474”,“backgroundColor”:“#009988”,“fontSize”:null,“fontWeight”:“300”}.

I’m confused why this warning appears because the “Previous style” and the “Mutated style” look exactly the same.

To reproduce the issue:

$ git clone [e-mail]:moroshko/accessible-colors.git
$ cd accessible-colors
$ git checkout 1d8efda7145ff316b78e60cc0f0ebe113da11367
$ npm install
$ npm start

Then open http://localhost:3000/dist/index.html in a browser, and:

1. Type “1” in the font size field
2. Blur that field Now you should see the warning in the console.

Why this warning is displayed? How could I fix it?

[bradbyte]

I ran into this issue while using Object.assign. I just set the target to be an empty object so there’s a new memory reference.

... style={Object.assign({}, styles.input, this.state.error ? {color: 'red'} : {}) ...

[rickhanlonii]

@AoDev the first does not throw a warning because of this line:

const style = { ... };

That’s creating a new style object with a new memory reference, so you’re actually not passing a mutated object. In the second you’re passing store.style which is the same object with the same reference before and after mutation.

You can fix the second with:

<div style={Object.assign({}, store.style)} />

Be sure to do this with care though because of the performance implications (passing props like this to pure children will always force a render, removing the benefits of pure components).