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.

Tearing happens when different parts of the UI display different values of the same store during a single render pass. Concurrent rendering can interrupt and resume work, and the store may change in between.

The result is an inconsistent screen where one component shows the old value and another shows the new one, an inconsistency that was effectively impossible before concurrent features.

Imagine many components reading a theme store while React renders concurrently. If the user toggles dark mode partway through, components rendered before the toggle show the light theme and those after show dark.

You end up with a half-light, half-dark screen for a frame because the store value changed during a render that React did not treat atomically.

Effects run after render is committed, so a useEffect-based subscription cannot guarantee the value read during render matches the store at commit time. The subscription fires too late to prevent an inconsistent paint.

By the time the effect resubscribes and updates state, the inconsistent frame may already have been shown to the user.

An earlier experimental API called useMutableSource attempted to solve concurrent-safe external reads, but its API proved difficult to use correctly and was never released as stable.

The React team replaced it with a simpler, more ergonomic primitive that achieves the same consistency guarantees without the sharp edges.

useSyncExternalStore is the official hook for subscribing to external stores in a concurrent-safe way. It coordinates with React so reads stay consistent across a render and components never tear.

It became the recommended primitive for library authors who need to bridge external state into React reliably under concurrent rendering.

State libraries that subscribe to external stores were directly affected, including Redux, MobX, and Valtio. Each needed to adopt the new primitive to remain safe once concurrent features shipped.

This is why their React bindings were updated to call useSyncExternalStore internally rather than relying on the older useState plus useEffect pattern.

The hook guarantees that every component reading the store during a render sees the same snapshot, and it forces a synchronous re-render if the store changes in a way that would otherwise tear.

This combination of a consistent snapshot and concurrent safety is the core value the hook provides over hand-rolled subscriptions.

By using useSyncExternalStore, your subscriptions remain correct as React evolves its rendering model. You opt into the framework guarantees rather than reimplementing them imperfectly.

This makes it the durable, recommended way to connect any external source of truth to React components.

Confirm what tearing means in concurrent rendering.

External stores live outside React, and the naive useState plus useEffect subscription cannot prevent tearing once rendering is concurrent. Effects run too late to keep reads consistent within a render.

useSyncExternalStore replaces the abandoned useMutableSource and gives a consistent snapshot with concurrent safety. Libraries like Redux, MobX, and Valtio adopted it as the future-proof primitive for store subscriptions.