useSyncExternalStore — subscribe to external stores.
1import { useSyncExternalStore } from "react";23function useOnlineStatus() {4 return useSyncExternalStore(5 (callback) => {6 window.addEventListener("online", callback);7 window.addEventListener("offline", callback);8 return () => {9 window.removeEventListener("online", callback);10 window.removeEventListener("offline", callback);11 };12 },13 () => navigator.onLine,14 () => true15 );16}
Benefits: Tearing-safe (concurrent mode), SSR compatible, automatic re-render.
Use cases: Redux store, Zustand store, Browser APIs, any external state.