UseSyncExternalStore connects React to an external subscription and snapshot contract. The snapshot must remain stable while the underlying data is unchanged.
Before you start
You should know how a function component renders JSX, receives props and handles events. Follow the value through render, interaction and the next render. Small snippets below belong inside an existing React application unless they are explicitly shown as complete components.
The practical goal is to reason through this situation: A store exposes subscribe and getSnapshot; changing the store notifies listeners and yields a new snapshot. Read the walkthrough first, then try the interview exercise before opening its answer. The important part is explaining the decision and its consequences, rather than remembering a definition alone.
Step-by-step walkthrough
Step 1: Define subscription behavior
Subscribe must notify when data changes and return an unsubscribe function. The subscriber should not remain registered after unmounting.
Step 2: Make snapshots stable
Return the same snapshot while underlying data is unchanged. Replace it when a real change occurs rather than allocating on every read.
Step 3: Align server and client starts
Supply a server snapshot for server rendering and hydrate from compatible initial data. Browser-only state cannot silently change initial markup.
Worked scenario
A store exposes subscribe and getSnapshot; changing the store notifies listeners and yields a new snapshot.
const value = useSyncExternalStore(
store.subscribe,
store.getSnapshot,
store.getServerSnapshot
);Import the hook from React. The application-owned store must implement these contracts, with stable method references or correctly bound methods. The hook does not repair a getSnapshot method that returns a fresh object on every call.
Common mistake
Returning a new snapshot object on every read can cause unnecessary updates or render loops.
Verify the behavior
Read the snapshot twice without changing data and compare identity. Change data once, count notifications and verify the new snapshot reaches mounted subscribers only.
Interview exercise
Support server rendering.
Answer and reasoning
Provide a compatible server snapshot and ensure hydration starts from consistent data rather than unrelated client-only state.
Continue learning
Compare the scenario with the React interview questions and test your understanding with the React MCQs. For terminology and implementation details, consult the reference material.