External State Stores
External stores (Redux, Zustand, Jotai, MobX) manage state outside React's tree. Components subscribe to specific slices of the store and only re-render when their subscribed data changes, solving Context's 'all consumers re-render' problem.
An external store is a bank vault — your money (state) lives outside your house (component tree), and each family member (component) has a key to only their safety deposit box (selector).
useSyncExternalStore is React 18's official hook for integrating external stores. It ensures consistent reads during concurrent rendering by detecting tearing (when different parts of the UI show different versions of the same state). Zustand provides a minimal API: create a store with create(), use it with useStore(selector). Redux Toolkit simplifies Redux with createSlice and configureStore. The choice depends on app complexity: Zustand for simple apps, Redux for large teams needing middleware and devtools.
The tearing problem in concurrent rendering: without useSyncExternalStore, a component tree could render with mixed state versions if the store updates mid-render. useSyncExternalStore prevents this by checking if the snapshot changed between the start and end of rendering and forcing a synchronous re-render if it did. Signal-based stores (Preact Signals, Jotai) achieve even finer granularity by tracking which specific atoms/signals each component reads. The React team's long-term direction (React Compiler compiler) may reduce the need for external stores by making React's own state management more efficient.
External stores manage state outside React's tree with selective subscriptions — components only re-render when their specific slice changes, unlike Context. useSyncExternalStore is the official integration hook that prevents tearing in concurrent rendering. I pick Zustand for most apps due to its minimal API, and Redux Toolkit for large teams that need middleware, devtools, and structured patterns.
Using an external store without useSyncExternalStore in concurrent mode can cause tearing — different parts of the UI showing different state versions during the same render.