I have a question about the React::shouldComponentUpdate() method, since I do not understand his behavior.

I have state A , it is an array of objects. I change the state through this.setState() and assign a new property value to some object.

But in React::shouldComponentUpdate(nextProps, nextState), nextState === this.state

How can this be? I want to update a component only when something in nextState not equal to something in this.state .

    1 answer 1

    In general, all that has changed is the only thing that has changed in the DOM, but if you really need to optimize the update cycle itself, check what you are doing:

     ... shouldComponentUpdate: function(nextProps, nextState) { return nextState.someValue !== this.state.someValue; }, ...

    From the code in the task is not entirely clear, but it seems that you are trying to compare two objects. And they, in javascript, not being a link to the same one, will always be not identical, even if their properties are equal, and this is probably the problem.

    And shouldComponentUpdate is made specifically to render the component only when the desired property (or properties) of this.state state is this.state .

    • Long to describe what I'm trying to compare. Just imagine an array of objects in the state and when you click on a link, the property of an object changes in a state. Further, when the shouldComponentUpdate state is this.state.obj [123] .name == nextState.obj [123] .name The problem is that the values ​​in this method are identical: / - trauma
    • It looks like you need to add a code, but make jsBin better, you can check there, and here you won't get a big chunk of the code - 11111000000
    • Specify how you change this value - 11111000000
    • var state = $.extends({}, this.state); state.obj[123].name = 'test'; this.setState(state); - trauma