Ndtyjky

I found a lot of posts regarding PureComponents shallow comparison but wonder the following:

If React.PureComponent or shouldComponentUpdate only does shallow comparison - wouldnt it mean that if I pass an object via props or compare my state to nextState (which is an object) that it would always result in false even if properties of that object have changed (since its still pointing to the same object and no comparison of the properties is being done), thus, my component would not re-render?

Yes, you may get into case when render is not called since object is the same. Even official docs suggest not passing object values into PureComponent.

Only extend PureComponent when you expect to have simple props and state, or use forceUpdate() when you know deep data structures have changed. Or, consider using immutable objects to facilitate fast comparisons of nested data.

But this will work once you avoid mutating this object passed to props in parent component.

If you follow the way as redux‘s reducers do(return new object once anything inside is changed) you will be fine.

But again since it requires additionally attention from anybody it's safer just avoid passing objects and explode all data in list of primitive values passed independently

[UPD] let's take a look into few examples for Parent component's code:

Here MyPure will always re-render because it's different object passed each time:

render() {

    let childData = {....}; 

    ....

    return (

    .... 

        <MyPure data={childData} />

Here MyPure will never be re-rendered because this.childData is shallowly the same:

changeChild = () => {

    this.childData.a++;

}



render() {

    ....

    return (

    ....

        <MyPure data={this.childData} />

This will work well since we are updating different object only after updating something inside:

changeChild = () => {

    this.setState(oldState => ({

        childData: {

            ...oldState.childData,

            a: oldState.childData.a + 1

        }

    }));

}



render() {

    ....

    return (

    ....

        <MyPure data={this.state.childData} />

So there are few restrictions we need to follow:
1. don't construct data prop in render()(explicitly or implicitly through calling separated method)
2. don't mutate object data prop

The shallow comparison will be of the first level of properties within an object. For state, it should NOT be the same object, since you should always call setState with a new object. You should not directly mutate the existing state.