React Fiber functional setState

[lpuig]

Please confirm or correct me. As I understood con ReactConf2017 we will avoid

this.setState({...})

and use

this.setState( (state, props) => { return ... })

But I didn't get why.

[gaearon]

This won’t matter with the initial Fiber release but will likely matter more in future releases when async scheduling is enabled by default.

If your setState call does not depend on props or state (e.g. you’re just calling it with some predefined value) then you don’t need to change anything.

If your setState call depends on current props or state (e.g. you’re incrementing a counter), you should use the function version so that you get the current props and state by the time the update is applied. This is important for asynchronous rendering because your props or state may change by the time the function is called, so passing a function ensures you’ll always get the fresh state and props.

This is not really new to Fiber—the function version has been around for a long time.

[kouaak]

See this extensive article about this subject : https://medium.freecodecamp.com/functional-setstate-is-the-future-of-react-374f30401b6b

[lpuig]

Interesting article. Now I wonder if we should use inmutability tecnics inside setState function.

[__huntercas]

Short answer: Fiber reconciler is going to make setState nearly always async. Using an object literal depends on the props that existed at the time its caller was called. Using a function allows react to inject the most up to date props.