React 19+ · Hook

useSyncExternalStore

useSyncExternalStore lets a component read from and subscribe to an external store. It supports server rendering through an optional server snapshot and re-renders when the snapshot changes.

How it works

Call this Hook at the component’s top level with a subscription function and a snapshot reader. React invokes the reader after store notifications, compares snapshots, and re-renders when the value changes; an optional third function supplies the server and hydration snapshot.

Syntax

const snapshot = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot?)

Parameters

Name	Type	Description
`subscribe`	`(callback: () => void) => () => void`	Subscribes to the store with a callback and returns a cleanup function that unsubscribes.
`getSnapshot`	`() => Snapshot`	Returns the immutable snapshot needed by the component; unchanged store state must produce the same value.
`getServerSnapshot`	`() => Snapshot`	Optional initial snapshot used during server rendering and hydration; it must match between server and client.

Returns

The current snapshot of the external store.

Key points

Use it to read data managed outside React while letting React coordinate subscription updates.
Invoke the Hook at component top level, not inside conditions, loops, or nested functions.
Implement subscribe as a registration operation whose returned cleanup reverses that registration.
Provide a reader for the portion of external-store state required by the component.
The store must notify React through the callback whenever its relevant data changes.
React uses Object.is semantics on snapshot results to decide whether the component needs another render.

Common mistakes

Return immutable snapshots. For mutable underlying data, create a new immutable snapshot only when the store changes; otherwise reuse the cached snapshot.
Cache the snapshot while the store is unchanged; unstable results can cause unnecessary work or an infinite update loop.
When server rendering, provide a third argument whose result matches the client’s initial snapshot during hydration.
Server-rendered components need getServerSnapshot; omitting it causes server rendering to fail.

Example: Subscribe to browser online status

import { useSyncExternalStore } from 'react';

const onlineStore = {
  subscribe(callback: () => void) {
    window.addEventListener('online', callback);
    window.addEventListener('offline', callback);
    return () => {
      window.removeEventListener('online', callback);
      window.removeEventListener('offline', callback);
    };
  },
  getSnapshot: () => navigator.onLine,
};

export function OnlineStatus() {
  const online = useSyncExternalStore(
    onlineStore.subscribe,
    onlineStore.getSnapshot,
    () => true,
  );
  return <p>{online ? 'Online' : 'Offline'}</p>;
}

Reads browser connectivity through a stable subscription and supplies a server fallback for hydration.

When to use it

External state libraries

A state-management library exposes data outside React and needs concurrent-safe React integration.

Browser subscriptions

A browser API such as online/offline status changes independently of React state.

SSR and hydration

A server-rendered component reads external data that must match during hydration.

Interview questions

QHow does useSyncExternalStore detect external-store changes?

The Hook connects React to a store outside React. subscribe registers a callback and returns cleanup, while getSnapshot reads the data; React calls getSnapshot after notifications and re-renders when its result changes by Object.is.

Follow-up: Why must snapshots be cached? Repeated reads must return the same value when the store is unchanged, so a new object on every read can trigger endless updates.

QWhat contract does subscribe implement?

subscribe receives React’s callback and must invoke it whenever the store changes. It must also return a cleanup function that removes the subscription.

Follow-up: What if subscribe changes identity between renders? React resubscribes using the new function, so define stable subscription logic when possible.

QWhen is getServerSnapshot required?

getServerSnapshot supplies the initial store value during server rendering and client hydration. The server and client values must match, commonly by serializing the server value for the client.

Follow-up: What happens without it in SSR? Rendering the component on the server throws an error.

useEffect
useState
useSyncExternalStoreWithSelector
subscribe
getSnapshot
getServerSnapshot

Source: useSyncExternalStore – React. Checked 2026-10-15.