What is the useSyncExternalStore hook?

The useSyncExternalStore hook is designed to subscribe to external stores (non-React state sources) in a way that's compatible with concurrent rendering. It's primarily used by library authors for state management libraries.

Syntax

const state = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot?);

• subscribe: Function to subscribe to the store, returns an unsubscribe function
• getSnapshot: Function that returns the current store value
• getServerSnapshot: Optional function for SSR that returns the initial server snapshot

Example: Browser Online Status

import { useSyncExternalStore } from 'react';

function getSnapshot() {
return navigator.onLine;
}

function subscribe(callback) {
window.addEventListener('online', callback);
window.addEventListener('offline', callback);
return () => {
window.removeEventListener('online', callback);
window.removeEventListener('offline', callback);
};
}

function useOnlineStatus() {
return useSyncExternalStore(subscribe, getSnapshot, () => true);
}

function StatusBar() {
const isOnline = useOnlineStatus();
return <h1>{isOnline ? '✅ Online' : '❌ Disconnected'}</h1>;
}

This hook ensures that when the external store changes, React re-renders consistently without tearing (showing inconsistent data).