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.
Why it exists
React's concurrent features can render updates in multiple passes. If an external data source changes mid-render, different components might see different versions of the data, creating a visually inconsistent or "torn" UI. This hook was created to prevent this specific problem by synchronizing external updates with React's render cycle.
The mental model
Think of useSyncExternalStore as a formal treaty between React and an outside data source. It tells React, "I will manage subscribing to this external thing, and I promise to give you a stable, unchanging 'snapshot' of its data for this entire render. When the data changes, I'll notify you to schedule a new, consistent render."
How it works
You provide two key functions: subscribe and getSnapshot. The subscribe function takes a callback and sets up a listener on the external store; it must return a cleanup function to unsubscribe. When the store changes, it calls the provided callback to notify React. The getSnapshot function reads the current value from the store. React calls this to get the data for rendering. For server-side rendering, an optional getServerSnapshot function provides the initial state.
When to use it
Use this hook whenever a component needs to display data from a source not managed by React. Three key places this shows up: first, integrating third-party state management libraries like Redux or Zustand; second, subscribing to browser APIs like window.matchMedia or navigator.onLine; and third, working with any other external, mutable data source that needs to be reflected in the UI.
When not to use it
Avoid this hook for state that is local to a component or shared only within your React application tree. For those cases, useState, useReducer, or useContext are simpler and more appropriate. This hook is specifically for bridging the gap to external stores.
One canonical example
A classic use case is subscribing to the browser's network status. The subscribe function would use window.addEventListener for 'online' and 'offline' events. The getSnapshot function would simply return the boolean navigator.onLine. This lets your component reactively display a connection status message without risking UI tearing, even in a complex, concurrent React application.
Interview question
Which problem does React's useSyncExternalStore hook primarily aim to resolve?
- a.Managing asynchronous data fetching and caching results from remote APIs.
- b.Sharing global application state efficiently across deeply nested components without prop drilling.
- c.Ensuring that all parts of a UI consistently reflect the state of an external data source, even during concurrent rendering.Correct
- d.Optimizing re-renders of components that consume frequently changing local state.
Why? this is the answer
The card states that useSyncExternalStore was created to prevent 'UI tearing' by synchronizing external updates with React's render cycle during concurrent rendering, which option C describes. Option D refers to general rendering optimizations for React's internal state, handled by other hooks or patterns.
Just read this? Test yourself on what you have been reading.
Read the original → react.dev
- #react
- #hooks
- #state management
- #concurrent rendering
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on react — each one lists the topics its interview covers.
See open roles