title: What is the best way for passing a deeply nested JSON object to a PureComponent prop in React?
body: <p>I have a pure component that takes a prop which is basically a deeply nested JSON object like below:</p>
  
  <pre><code>const jsonObject = {
    prop1: {
      arrayProp: [],
    },
    prop2: 'string',
    prop3: {
      anotherprop: {
        someanotherprop1: {},
        someanotherprop2: {
          someArrayProp: [],
        },
      },
    },
  };
  </code></pre>
  
  <hr>
  
  <p><strong>NOTE</strong>: <em>In reality, this object is much more deeper, but for simplicity's sake, I provided a simpler object.</em></p>
  
  <hr>
  
  <p>And I pass this to my pure component in a parent component like this:</p>
  
  <pre><code>class App extends React.Component {
        updateJSON = () =&gt; {
          const { jsonObject } = this.state;
  
          const updatedObject = _.cloneDeep(jsonObject);
  
          updatedObject.prop3.anotherprop.someanotherprop2.someArrayProp = [1, 2, 3];
  
          this.setState({ jsonObject: updatedObject });
        }
  
  
        render() {
          const { jsonObject } = this.state;
          return (
            &lt;View&gt;
              &lt;MyPureComponent layout={jsonObject} /&gt;
              &lt;TouchableOpacity onPress={this.updateJSON} /&gt;
            &lt;/View&gt;
          );
        }
      }
  </code></pre>
  
  <p>If for example I change someArrayProp array using setState , will my purecomponent be updated or not? </p>
  
  <p>For this specific case I can test it by myself but this is a generic question about how PureComponent conducts shallow comparison over such deep objects.</p>
  
  <p>As far as i understand, a pure component has a built-in componentShouldUpdate hook that does a shallow comparison over props and decide whether the component should update or not.</p>
  
  <p>This makes me think that due to my prop is deeply nested, it may sometimes miss to update the component since it may not detect a change in somewhere in my JSON tree.</p>
  
  <p>Should i really worry about this and implement my on componentShouldUpdate function to check differences? 
  Or should i create separate props based on my deeply nested JSON to overcome this issue?</p>