react: 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 git@github.com: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:

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

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

About this issue

Original URL
State: closed
Created 9 years ago
Comments: 24 (10 by maintainers)

Commits related to this issue

Improve error for style mutation Fixes #4877. I opted not to change shallowEqual for this since it seems relatively one-off. — committed to sophiebits/react by sophiebits 9 years ago
Improve error for style mutation Fixes #4877. I opted not to change shallowEqual for this since it seems relatively one-off. — committed to sophiebits/react by sophiebits 9 years ago
Clear transition timeouts when component unmounts. Fixes #4877 — committed to jjjjw/react by jjjjw 9 years ago

Most upvoted comments

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'} : {}) ...

bradbyte on Feb 10, 2016

@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).

rickhanlonii on Sep 14, 2016

Used jQuery’s extend to clone the object and that solved it. Thanks @spicyj

essekia on Feb 10, 2016