useSyncExternalStore

公式ドキュメント ↗

function subscribe(callback) {
  listeners.add(callback);
  return () => listeners.delete(callback);
}
function getSnapshot() {
  return isOnline;
}
function getServerSnapshot() {
  return true; // サーバーには実体がないので、安全な既定値を返す
}

const online = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);

useEffectだけではダメな理由

// 素朴な実装(一見動くが、実は危険なケースがある)
const [online, setOnline] = useState(getSnapshot());
useEffect(() => {
  return subscribe(() => setOnline(getSnapshot()));
}, []);

「useEffectの中で値の変化を待ち受けて、setStateする」という書き方は一見動きそうに見える。しかしReact 18以降は複数の更新を並行して処理できるようになった分、タイミングによっては画面の一部が古い値、別の一部が新しい値のまま表示されてしまう(tearingと呼ばれる不整合)ことがある。useSyncExternalStoreは、この問題を避けるために作られた専用のAPIで、外部storeの値を安全に読み取れることをReact側が保証してくれる。

実際の使いどころ

普段のアプリ開発で自分で書く機会は少ないが、身近なライブラリの内部でよく使われている。オンライン状態、画面サイズの条件(メディアクエリ)、別タブでのlocalStorageの変更検知といったブラウザのAPI、あるいはReact以前から使われている外部の状態管理ライブラリをReactに安全につなぐために使われる。