title: Issue with state update approach for nested objects
body: <p><em>Major EDIT</em></p>
  <p>I have quite huge object which is 3 level deep. I use it as a template to generate components on the page and to store the values which later are utilized, eg:</p>
  <pre><code>obj =
   { 
    &quot;group&quot;: {
      &quot;subgroup1&quot;: {
        &quot;value&quot;: {
          &quot;type&quot;: &quot;c&quot;,
          &quot;values&quot;: []
        },
        &quot;fields_information&quot;: {
          &quot;component_type&quot;: &quot;table&quot;,
          &quot;table_headers&quot;: [
            &quot;label&quot;,
            &quot;size&quot;
          ],
        }
      },
      &quot;subgroup2&quot;: {
        &quot;value&quot;: {
          &quot;type&quot;: &quot;c&quot;,
          &quot;values&quot;: []
        },
        &quot;fields_information&quot;: {
          &quot;component_type&quot;: &quot;table&quot;,
          &quot;table_headers&quot;: [
            &quot;label&quot;,
            &quot;size&quot;
          ],
        }
      },
    },
   }
  
  </code></pre>
  <p>Thanks to this I can dynamically generate view which is, as a template, stored in DB.</p>
  <p>I'm struggling with 2 things. Firstly, updating values basing on user input for textbox, checkboxes and similar.
  I'm doing it this way:</p>
  <pre><code>    const updateObj = (group, subgroup, value) =&gt; {
          let tempObj = {...obj}
          tempObj[group][subgroup].value.value = value
          toggleObj(tempObj)
      }
  </code></pre>
  <p>I know that the spread operator is not in fact doing deep copy. However it allows me to work on the object and save it later. Is that an issue? Do I have to cloneDeep or it is just fine? Could cloneDeep impact performance?</p>
  <p>Second case is described below</p>
  <pre><code>export const ObjectContext = React.createContext({
      obj: {},
      toggleObj: () =&gt; {},
  });
  
  export const Parent = (props) =&gt; {
      const [obj, toggleObj] = useState()
      const value = {obj, toggleObj}
  
      return (
          &lt;FormCreator /&gt;
      )
  }
  
  const FormCreator = ({ catalog }) =&gt; {
      const {obj, toggleObj} = React.useContext(ObjectContext)
  
      return (&lt;&gt;
          {Object.keys(obj).map((sectionName, sectionIdx) =&gt; {
          const objFieldsInformation = sectionContent[keyName].fields_information
          const objValue = sectionContent[keyName].value
          ...
              if (objFieldsInformation.component_type === 'table') {
              return (
                  &lt;CustomTable 
                  key={keyName + &quot;id&quot;}
                  label={objFieldsInformation.label}
                  headers={objFieldsInformation.table_headers}
                  suggestedValues={[{label: &quot;&quot;, size: &quot;&quot;}, {label: &quot;&quot;, size: &quot;&quot;}, {label: &quot;&quot;, size: &quot;&quot;}]}
                  values={objValue.values}
                  sectionName={sectionName}
                  keyName={keyName}/&gt;
              )
              }
          ...
          })}
      &lt;/&gt;)
  }
  
  const CustomTable= (props) =&gt; {
      const { label = &quot;&quot;, headers = [], suggestedValues = [], values, readOnly = false, sectionName, keyName } = props
      const {obj, toggleObj} = React.useContext(ObjectContext) 
      
      //this one WORKS
      useEffect(() =&gt; {
          if (obj[sectionName][keyName].value.type === &quot;complex&quot;) {
              let temp = {...obj}
              temp[sectionName][keyName].value.values = [...suggestedValues]
              toggleObj(temp)
          }
      }, [])
      
      //this one DOES NOT
      useEffect(() =&gt; {
  
          if (obj[sectionName][keyName].value.type === &quot;c&quot;) {
              let temp = {...obj, [sectionName]: {...obj[sectionName], [keyName]: {...obj[sectionName][keyName], value: {...obj[sectionName][keyName].value, values: [{label: &quot;&quot;, size: &quot;&quot;}, {label: &quot;&quot;, size: &quot;&quot;}, {label: &quot;&quot;, size: &quot;&quot;}]}}}}
              toggleObj(temp)
          }
      }, [])
      
      return (
      //draw the array
      )
  }
  </code></pre>
  <p>Please refer to CustomTable component.
  As on the example Object above, I have 2 CustomTables to be printed. Unfortunately, one useEffect that should work is not working properly. I'm observing, that values field is set only for the last &quot;table&quot; in Obj. When I'm doing shallow copy of obj, it works fine. But I'm afraid of any repercussion that might happens in future.</p>
  <p>I'm also totally new to using createContext and maybe somehow it is the issue.</p>
  <p>Kudos to anyone understanding that chaos :)</p>