Closures capture values from render when callback was created — effects and handlers see old state if deps wrong.

React & Rendering

Stale closure problem

<h2>Summary</h2>
<p>Tearing — UI shows mixed versions of external store during concurrent render (e.g. legacy Redux subscription). <code>useSyncExternalStore</code> forces consistent snapshot per render. TanStack Query / modern libraries handle this; ad-hoc global mutable stores may not. Symptom: flickering values, inconsistent list order during fast updates.</p>
<h2>Code example</h2>
<pre><code class="language-javascript">import { useSyncExternalStore } from 'react';

function useStoreValue(store) {
  return useSyncExternalStore(
    store.subscribe,
    store.getSnapshot,
    store.getServerSnapshot,
  );
}
</code></pre>
<h2>Key points</h2>
<ul>
<li>Tearing — UI shows mixed versions of external store during concurrent render (e.g.</li>
<li>legacy Redux subscription).</li>
<li><code>useSyncExternalStore</code> forces consistent snapshot per render.</li>
<li>TanStack Query / modern libraries handle this; ad-hoc global mutable stores may not.</li>
<li>Symptom: flickering values, inconsistent list order during fast updates.</li>
</ul>
<h2>Further reading</h2>
<ul>
<li><a href="https://react.dev/reference/react/useSyncExternalStore">useSyncExternalStore</a></li>
<li><a href="https://react.dev/reference/react/useSyncExternalStore#troubleshooting">Tearing in concurrent rendering</a></li>
</ul>
<h2>Related concepts</h2>
<ul>
<li><a href="/blogs/level-2-server-components">Server Components</a></li>
<li><a href="/blogs/level-2-stale-closure-problem">Stale closure problem</a></li>
</ul>


Tearing — UI shows mixed versions of external store during concurrent render (e.g.

Tearing in concurrent UI

RSC run only on server — zero client bundle for their logic, serializable props to client components.