React useSyncExternalStore — ブラウザAPIへの安全なサブスクリプション

useSyncExternalStoreによる外部ストアのサブスクリプション

useSyncExternalStoreはコンカレントReactで外部データソースに安全にサブスクライブする方法を提供し、ティアリング（異なる時点からの不整合なデータの表示）を防ぎます。

3つの引数

1. subscribe：コールバックを受け取りアンサブスクライブ関数を返す
2. getSnapshot：現在の値を返す（変更されていない場合は同じ参照を返す必要がある）
3. getServerSnapshot：SSR用の値を返す（サーバーレンダリングされるコンポーネントに必要）

よくある間違い：毎回新しいオブジェクト

// バグ：毎回新しいオブジェクトを返し、無限再レンダリング
() => ({ width: window.innerWidth, height: window.innerHeight })

// 修正：プリミティブを返すか、オブジェクトをキャッシュ
() => window.innerWidth // プリミティブ -- 安全

使用するタイミング

Reactが管理しない外部状態にuseSyncExternalStoreを使用します：ブラウザAPI、サードパーティ状態管理ライブラリ、共有ミュータブルデータソース。React管理の状態にはuseStateやuseReducerを使用してください。