jhegedus jhegedus - 1 month ago 7
React JSX Question

React's setState(), data mutation for nested structures, why not modify state directly?

Is the following react code wrong ?

state={ foo: { bar: true } } // line 1
setState(state) // line 2
state.foo.bar = false // line 3
setState(state) // line 4


If yes, why ?

This suggest that it is wrong, but does not explain why ?

I think it is not wrong, for the following reason:


  • at
    line 2
    vdom1
    is created

  • at
    line 4
    vdom2
    is created

  • vdom1
    and
    vdom2
    are compared

  • difference is propagated to the actual DOM



If this is the case, then mutating
state
at
line3
should not have any effect on what happens at
line4
.

In other words:

this should be equivalent code:

state={ foo: { bar: true } } // line 1
setState(state) // line 2
state={ foo: { bar: false } } // line 3
setState(state) // line 4


Is this code equivalent to the one above ?

If not, why not ?

Answer

Creating an immutable clone of state is a good idea because of the way state changes are compared in order to optimise rendering.

In lifecycle methods like shouldComponentUpdate, nextProps are passed in and can be compared to this.props.

If you mutate the state directly, then nextProps.prop1 and this.props.prop1 will always be the same and therefore you might not get the expected behaviour.

I'm sure there are other reasons as well, but this one seems like the most straight-forward.