React useSyncExternalStore Hook Guide

The useSyncExternalStore hook subscribes to external data sources with concurrent rendering support. Here's how to use it.

Best Practices#

Usage:
✓ Use for external data sources
✓ Provide server snapshot for SSR
✓ Memoize selectors
✓ Keep snapshots immutable

Store Design:
✓ Return same object if unchanged
✓ Notify only on actual changes
✓ Clean up subscriptions
✓ Handle edge cases

Performance:
✓ Select minimal data needed
✓ Avoid creating objects in getSnapshot
✓ Use stable selector references
✓ Batch updates when possible

Avoid:
✗ Using for React-managed state
✗ Mutating snapshot data
✗ Expensive getSnapshot logic
✗ Missing server snapshot

The useSyncExternalStore hook safely integrates external data sources with React's concurrent rendering. Use it for browser APIs, WebSocket connections, global stores, and third-party state management. Always provide a server snapshot for SSR compatibility and use selectors to optimize re-renders.

React useSyncExternalStore Hook Guide

Basic Usage#

Creating a Store#

Server-Side Rendering#

Selecting Store Data#

Browser APIs#

History/Router Integration#

WebSocket Connection#

Redux-like Store#

Best Practices#

Conclusion#

Share this article

Related articles

Zustand for Simple State Management

React useReducer Patterns Guide

React useReducer Guide