title: useState is accepting updates if the object reference does not change
body: <p>I thought that <code>useState</code> needed to have a new value for it to accept updates:</p>
  
  <p>I have created this<a href="https://codesandbox.io/s/ly1352mmv9" rel="nofollow noreferrer">codesandbox</a> to illustrate what I mean.</p>
  
  <p>I have a nested data structure like this</p>
  
  <pre><code>   const state = {
        name: "parent",
        data: {
          isExpanded: false,
          children: [
            { name: "one", data: { isExpanded: false } },
            { name: "two", data: { isExpanded: false } },
            { name: "three", data: { isExpanded: false } }
          ]
        }
      };
  </code></pre>
  
  <p>I then use <code>useState</code> to cause rerenders when the state changes:</p>
  
  <pre><code>function App() {
    const [tree, setTree] = useState(state);
  
    const toggleExpanded = node =&gt; {
      node.data.isExpanded = !node.data.isExpanded;
  
      setTree(tree);
    };
  
    return (
      &lt;div className="App"&gt;
        &lt;h1&gt;IsExpanded&lt;/h1&gt;
        {tree.data.children.map(child =&gt; (
          &lt;button onClick={() =&gt; toggleExpanded(child)}&gt;
            {child.name} - {child.data.isExpanded ? "on" : "off"}
          &lt;/button&gt;
        ))}
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>I am using the same reference each time when calling <code>setTree</code> and the updates are happening.</p>
  
  <p>I thought it needed a new reference each time for this to happen?</p>
  
  <p>I might be missing something but is update not happening with the same reference.</p>