Most React apps reach for a state library the moment state has to live outside a component. Building one yourself is the fastest way to understand what useSyncExternalStore actually expects — and why a store that returns a fresh object on every getSnapshot call loops forever.

🧩 Overview

Build the external store behind a live metrics dashboard: immutable snapshots, subscribe / getSnapshot , five-second polling, stale-response protection, and pause/resume with real cleanup — all in store.ts .

👉 https://www.reactchallenges.com/challenges/build-external-store

✅ Requirements

createMetricsStore(fetcher) returns subscribe , getSnapshot , start , refresh , pause , and resume ; fetcher defaults to fetchMetrics .

The initial snapshot is { metrics: [], updatedAt: null, status: "idle", error: null } .

getSnapshot returns the same object reference until the state changes.

subscribe(listener) registers a listener and returns a function that removes it.

Subscribers are notified after every state change.

start()…