useSyncExternalStore: For Synchronous External State
`useSyncExternalStore` lets React safely read from external data sources without UI tearing. It's for integrating non-React state, like from Redux or browser APIs, ensuring consistent reads during concurrent rendering.
`useSyncExternalStore` lets React components subscribe to external data stores, guaranteeing synchronous and consistent state reads. It solves UI "tearing" in concurrent rendering, where parts of the UI could show stale data. Use it to integrate third-party state libraries like Redux or browser APIs like `window.online`. The main footgun is that your `getSnapshot` function must return an immutable value; returning a mutated object will cause React to miss the update and skip re-rendering.
Read the original → react.dev
- #react
- #hooks
- #state management
- #concurrent rendering
Get five bites like this every day.
Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.