Q35: Why was useSyncExternalStore introduced in React 18?

useSyncExternalStore is a Hook recommended for reading and subscribing from external non-React store data sources (like Redux, Zustand, window.navigator.onLine, or browser media queries) safely without tearing during concurrent render execution.

Subscribing to Browser Online Status

function useOnlineStatus() {
  return useSyncExternalStore(
    (callback) => {
      window.addEventListener('online', callback);
      window.addEventListener('offline', callback);
      return () => {
        window.removeEventListener('online', callback);
        window.removeEventListener('offline', callback);
      };
    },
    () => navigator.onLine // Client snapshot
  );
}

💡 useSyncExternalStore safely reads navigator.onLine status without tearing during concurrent renders.

Key Takeaways

Prevents UI tearing (inconsistent UI visual states) during concurrent rendering.
Replaces legacy useEffect subscription patterns for external stores.

Knowledge Check

What issue ('tearing') can occur if reading external stores using standard useEffect in Concurrent Mode?

Q35: Why was useSyncExternalStore introduced in React 18?

STAY UPDATED WITH BYTES!