Synchronizing External Stores with useSyncExternalStore

Snippet

Synchronizing External Stores with useSyncExternalStore

The useSyncExternalStore hook is the recommended way to subscribe to external data sources (like browser APIs or global state) in Next.js/React. It ensures 'tearing' is avoided during concurrent rendering and provides a consistent snapshot of the data, including support for Server-Side Rendering (SSR) via the getServerSnapshot argument.

snippet.js
javascript
import { useSyncExternalStore } from 'react';
 
const subscribe = (callback) => {
  window.addEventListener('online', callback);
  window.addEventListener('offline', callback);
  return () => {
    window.removeEventListener('online', callback);
    window.removeEventListener('offline', callback);
  };
};
 
const getSnapshot = () => navigator.onLine;
const getServerSnapshot = () => true;
 
function useOnlineStatus() {
  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
}

nextjs

Breakdown

useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);

Connects an external store to React, handling subscription and snapshot consistency.

const subscribe = (callback) => { ... };

A function that registers a listener and returns a cleanup function to unsubscribe.

const getSnapshot = () => navigator.onLine;

Returns the current value of the external state used for rendering.

Previous snippet Next snippet

More Expert JavaScript exercises →

From your library

Synchronizing External Stores with useSyncExternalStore

Related