Subscribing to external stores safely under concurrent rendering.
01
01
Understand the problem
reactconcurrentstate-management
02
02
Attempt it yourself
Sketch your approach before reading the solution — that's what interviews test.
Stuck? AI Nudge Available
Get a conceptual hint to guide your logic without spoiling the final implementation.
03
03
Study the solution
The solution is waiting
Give it an honest attempt first — then compare your thinking with the full walkthrough.
04
04
Explore the playground snippets
Subscribing two components to one external store
Run Playgroundimport { useSyncExternalStore } from 'react';
// A tiny store that lives OUTSIDE React.
let count = 0;
const listeners = new Set();
const store = {
increment() { count++; listeners.forEach((l) => l()); },
subscribe(l) { listeners.add(l); return () => listeners.delete(l); },
getSnapshot() { return count; },
};
function Counter() {
const value = useSyncExternalStore(store.subscribe, store.getSnapshot);
return <h2>External count: {value}</h2>;
}
export default function App() {
return (
<div style={{ fontFamily: 'sans-serif', padding: 24 }}>
<Counter />
<Counter />
<button onClick={() => store.increment()}>Increment store</button>
<p style={{ color: '#666' }}>Both counters read one consistent snapshot — no tearing.</p>
</div>
);
}05
05
Join the discussion
Discussion (0)
Sign in to join the discussion.
No responses yet. Be the first to share what you think.