Never mutate state in place — spread, Immer produce, or persistent data structures.

State & Data Flow

Immutable data patterns

<h2>Summary</h2>
<p>Immutable updates reuse unchanged subtrees — only changed paths get new references. Enables cheap equality checks and memoization (Immer, Redux Toolkit). Shallow copy of top level without sharing deep nodes breaks memo benefits. Structural sharing is why <code>===</code> on root state can still mean "nothing changed" for subtrees.</p>
<h2>Code example</h2>
<pre><code class="language-javascript">function updateUser(state, patch) {
  return {
    ...state,
    profile: { ...state.profile, ...patch },
  };
}
// Unchanged profile.avatar reference is reused (structural sharing)
</code></pre>
<h2>Key points</h2>
<ul>
<li>Immutable updates reuse unchanged subtrees — only changed paths get new references.</li>
<li>Enables cheap equality checks and memoization (Immer, Redux Toolkit).</li>
<li>Shallow copy of top level without sharing deep nodes breaks memo benefits.</li>
<li>Structural sharing is why <code>===</code> on root state can still mean "nothing changed" for subtrees.</li>
</ul>
<h2>Further reading</h2>
<ul>
<li><a href="https://react.dev/learn/updating-objects-in-state">Updating objects in state</a></li>
<li><a href="https://react.dev/learn/updating-arrays-in-state">Immutability patterns</a></li>
</ul>
<h2>Related concepts</h2>
<ul>
<li><a href="/blogs/level-4-immutable-data-patterns">Immutable data patterns</a></li>
</ul>


Immutable updates reuse unchanged subtrees — only changed paths get new references.

Structural sharing

GC pauses main thread — large object graphs and allocation churn cause jank.