<p dir="auto">If state is currently:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="{
   foo: 123,
   user: {typing: false, active: false}
}"><pre class="notranslate"><code class="notranslate">{
   foo: 123,
   user: {typing: false, active: false}
}
</code></pre></div>
<p dir="auto">Then calling <code class="notranslate">this.setState({user: {typing: true}})</code> results in state being:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="{
   foo: 123,
   user: {typing: true}
}"><pre class="notranslate"><code class="notranslate">{
   foo: 123,
   user: {typing: true}
}
</code></pre></div>
<p dir="auto">It would be great to have a <code class="notranslate">setStateRecursively</code> function and to make it clear in the <code class="notranslate">setState</code> documentation that it only merges one level deep before just replacing sub-states.</p>
<p dir="auto">You know people want it…</p>