Network status event handler using useSyncExternalStore

useOnlineStatusChange.tsx

export function useOnlineStatusChange(
  onOnline: () => void,
  onOffline: () => void
) {
  return useSyncExternalStore(
    (callback) => {
      window.addEventListener('online', onOnline);
      window.addEventListener('online', callback);
      window.addEventListener('offline', onOffline);
      window.addEventListener('offline', callback);

      return () => {
        window.removeEventListener('online', onOnline);
        window.removeEventListener('online', callback);
        window.removeEventListener('offline', onOffline);
        window.removeEventListener('offline', callback);
      };
    },
    () => navigator.onLine,
    () => true
  );
}