The Problem with External Store Subscriptions

An external store is any source of state that lives outside the React tree, such as a Redux store, a browser API like matchMedia, or a plain module-level object with its own subscribe mechanism.

React does not own this state, so it must subscribe to changes and read snapshots to keep components in sync with whatever the store currently holds.

A common approach reads the store value into useState, then uses useEffect to subscribe and call setState whenever the store changes. On the surface this seems to keep the component current.

It works for simple synchronous rendering, but it has a subtle flaw that becomes visible once React renders concurrently and can pause or restart work mid-flight.