Subscribing to External Data with useSyncExternalStore

Snippet

Subscribing to External Data with useSyncExternalStore

This hook is the recommended way to subscribe to external data sources (like browser APIs or non-React stores) in a way that is compatible with React's concurrent rendering.

snippet.js

javascript

import { useSyncExternalStore } from 'react';
 
const isOnline = useSyncExternalStore(
  (onStoreChange) => {
    window.addEventListener('online', onStoreChange);
    window.addEventListener('offline', onStoreChange);
    return () => {
      window.removeEventListener('online', onStoreChange);
      window.removeEventListener('offline', onStoreChange);
    };
  },
  () => navigator.onLine
);

react

Breakdown

useSyncExternalStore(subscribe, getSnapshot)

Accepts a subscription function and a function to retrieve the current value from the external source.

Previous snippet Next snippet

More Intermediate JavaScript exercises →

From your library

Subscribing to External Data with useSyncExternalStore

Related