useSyncExternalStore() — hook for synchronous reading of external store with guaranteed absence of tearing.
Problem: With Concurrent React (React 18+) components can "tear" — part of UI updated, and part is not yet. This is called tearing (torn render).
1import { useSyncExternalStore } from "react";23// Subscribe to external store4function subscribe(callback) {5 window.addEventListener("storage", callback);6 return () => window.removeEventListener("storage", callback);7}89// Get current value10function getSnapshot() {11 return localStorage.getItem("theme");12}1314function Theme() {15 const theme = useSyncExternalStore(subscribe, getSnapshot);16 return <div className={theme}>...</div>;17}