React 16.5.0: It is not recommended to assign props directly to state

[asapach]

After upgrading to React 16.5.0 I now see the following warning:

Warning: Provider: It is not recommended to assign props directly to state because updates to props won't be reflected in state. In most cases, it is better to use props directly.

This seems to be caused by this line:

mobx-react/src/Provider.js

Line 18 in 54dd1a8

this.state = props || {}

Relevant changes in React: facebook/react#11593 and facebook/react#11658

[mweststrate]

Could you create a small sandbox isolating the issue? Op do 6 sep. 2018 21:13 schreef Aliaksei Sapach <notifications@github.com>:

…

After upgrading to React 16.5.0 <https://github.com/facebook/react/blob/master/CHANGELOG.md#1650-september-5-2018> I now see the following warning: Warning: Provider: It is not recommended to assign props directly to state because updates to props won't be reflected in state. In most cases, it is better to use props directly. This seems to be caused by this line: https://github.com/mobxjs/mobx-react/blob/54dd1a86cbdfb07f28fd6ce09879eb351b7b92ff/src/Provider.js#L18 Relevant changes in React: facebook/react#11593 <facebook/react#11593> and facebook/react#11658 <facebook/react#11658> — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#545>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABvGhLOTAJTa3Z92Idmbo_zlfxIMX8P_ks5uYXPDgaJpZM4Wdijp> .

[asapach]

Here's the sandbox: https://codesandbox.io/s/z241341v9l?expanddevtools=1
Example taken from the readme.

[yuminjustin]

I also met today.

package versions：

It's came from Provider，but it doesn't affect the project running

[urugator]

I think we just have to change

// https://github.com/mobxjs/mobx-react/blob/master/src/Provider.js#L18
this.state = props || {}
// to => 
this.state = { ...props }

I quess the only reason why we use state is the warning in getDerivedStateFromProps right?

[ematipico]

But that's a shallow copy. A full copy should be made.

[urugator]

Why? The copy is just to satisfy react's check (it only compares references):
https://github.com/facebook/react/pull/11658/files#diff-b69c8f2165f95ef2355ac661c12fa407R679

[mkhuda]

This also happened on https://github.com/zeit/next.js/tree/canary/examples/with-mobx (newest NextJS with Mobx store)

[mweststrate]

Will investigate early next week, probably not too hard to adjust :) Op vr 7 sep. 2018 om 18:06 schreef Lek Huda <notifications@github.com>:

…

This also happened on https://github.com/zeit/next.js/tree/canary/examples/with-mobx (newest NextJS with Mobx store) — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#545 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABvGhHqO0UjwYnC9kIlsaPKTFUZPDYzLks5uYpmNgaJpZM4Wdijp> .

[gaearon]

Since you're handling that manually later this.state = {...props} is fine.

Avoid writing code like this in your apps though, it's usually a bug. :-)

[mweststrate]

@gaearon

Edit totally misread the comment :)

[mweststrate]

Fixed and releases as 5.2.8!

[inoyakaigor]

@mweststrate why do you change ...spread by Object.assign?

[mweststrate]

Caused issue in the build, but anyway the next commit I all cleaned it up a bit :) Op ma 10 sep. 2018 om 20:48 schreef Igor «InoY» Zvyagintsev < notifications@github.com>:

…

@mweststrate <https://github.com/mweststrate> why you change ...spread by Object.assign? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#545 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABvGhB7YVAw7y3Gp4gD0EGw1M7Iw2wt-ks5uZrEvgaJpZM4Wdijp> .

[billysin]

Thanks mweststrate

[FishPlusOrange]

awesome 💯

[danielkcz]

@FishPlusOrange Seriously? Please refrain from commenting on old and closed issues, especially if you only want to express gratitude...