useSyncExternalStore: Safely Read from External State
useSyncExternalStore lets your React components safely subscribe to data outside of React's state. Use it to connect to state libraries like Zustand or browser APIs. The main footgun: your getSnapshot function must return an immutable, cached value.
Why it exists
React needs a way to know when to re-render based on changes in data it doesn't manage itself. Without a formal API, concurrent features could cause "tearing," where different parts of the UI render with inconsistent, out-of-sync data from an external store. useSyncExternalStore solves this by providing a synchronized, official bridge.
The mental model
Think of it as a formal contract between React and an outside data source. You tell React: "Here's how to listen for changes (subscribe), and here's how to read the current value (getSnapshot)." React then takes responsibility for re-rendering your component only when the value actually changes, preventing inconsistent UI.
How it works
The hook takes two required functions and one optional one. First, subscribe takes a callback and calls it whenever the external data changes; it must return a cleanup function to unsubscribe. Second, getSnapshot reads the current value from the store. React calls getSnapshot and compares its return value (using Object.is) to the previous one to decide if a re-render is needed. Third, an optional getServerSnapshot provides the initial data for server-side rendering.
When to use it
Use this hook when a component needs to react to changes in a data source not managed by React state (like useState). This is essential for integrating third-party state management libraries (Redux, Zustand), subscribing to browser APIs (window.online, window.matchMedia), or connecting to any other external, observable data source.
When not to use it
Avoid this for state that is local to a component or shared only within a small React component tree. For those cases, useState, useReducer with useContext, or modern server-driven state with use are more idiomatic and simpler. This hook is specifically for external data that React doesn't control.
One canonical example
Subscribing to the browser's network status. The subscribe function would add 'online' and 'offline' event listeners to the window object, returning a function that removes them for cleanup. The getSnapshot function would simply return navigator.onLine. This lets a component re-render automatically whenever the device's network connection changes.
Interview question
What critical characteristic must the getSnapshot function in useSyncExternalStore possess to ensure correct behavior and prevent issues like tearing?
- a.It must directly invoke a re-render of the component when the external data changes.
- b.It must execute a deep equality check on the external store's current data.
- c.It must return a new object reference whenever the external state is modified.
- d.It must return an immutable, cached value for React's comparison.Correct
Why? this is the answer
The card states that "your getSnapshot function must return an immutable, cached value." This is crucial because React uses Object.is to compare the returned value, and a stable, cached reference allows React to efficiently determine if a re-render is truly necessary. Option C is incorrect because returning a new reference unnecessarily would cause React to re-render even if the underlying data hasn't logically changed, defeating the purpose of the comparison.
Just read this? Test yourself on what you have been reading.
Read the original → react.dev
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