React useSyncExternalStore: 外部状態同期をマスターする

useSyncExternalStoreは、React 18で導入されたReactフックで、コンカレントレンダリングと互換性のある方法で外部データソースをサブスクライブし、読み取ることを可能にします。このフックは、Reactの管理された状態と、サードパーティのライブラリ、ブラウザAPI、または他のUIフレームワークからのデータなどの外部状態との間のギャップを埋めます。その目的、実装、利点について深く掘り下げてみましょう。

useSyncExternalStoreの必要性を理解する

Reactの組み込み状態管理（useState, useReducer, Context API）は、Reactコンポーネントツリーと密接に結合したデータに対して非常にうまく機能します。しかし、多くのアプリケーションでは、Reactの制御*外*にあるデータソースと統合する必要があります。これらの外部ソースには以下のようなものがあります：

• サードパーティの状態管理ライブラリ: Zustand、Jotai、Valtioなどのライブラリとの統合。
• ブラウザAPI: localStorage、IndexedDB、またはNetwork Information APIからのデータへのアクセス。
• サーバーからフェッチされたデータ: React QueryやSWRのようなライブラリが好まれることが多いですが、時には直接的な制御が必要な場合もあります。
• 他のUIフレームワーク: Reactが他のUI技術と共存するハイブリッドアプリケーションにおいて。

Reactコンポーネント内でこれらの外部ソースから直接読み書きを行うと、特にコンカレントレンダリングで問題が発生する可能性があります。Reactが新しい画面を準備している間に外部ソースが変更された場合、Reactは古いデータでコンポーネントをレンダリングしてしまうかもしれません。useSyncExternalStoreは、Reactが外部状態と安全に同期するためのメカニズムを提供することで、この問題を解決します。

useSyncExternalStoreの仕組み

useSyncExternalStoreフックは3つの引数を受け取ります：

1. subscribe: コールバックを受け取る関数。このコールバックは、外部ストアが変更されるたびに呼び出されます。この関数は、呼び出されたときに外部ストアのサブスクリプションを解除する関数を返すべきです。
2. getSnapshot: 外部ストアの現在の値を返す関数。Reactはレンダリング中にこの関数を使用してストアの値を読み取ります。
3. getServerSnapshot (オプション): サーバー上で外部ストアの初期値を返す関数。これはサーバーサイドレンダリング（SSR）にのみ必要です。提供されない場合、Reactはサーバー上でgetSnapshotを使用します。

このフックは、getSnapshot関数から取得した外部ストアの現在の値を返します。Reactは、getSnapshotが返す値が（Object.isによる比較で）変更されるたびにコンポーネントが再レンダリングされることを保証します。

基本例: localStorageとの同期

useSyncExternalStoreを使用して値をlocalStorageと同期させる簡単な例を作成してみましょう。

```javascript import { useSyncExternalStore, useState, useEffect } from 'react'; function subscribe(callback) { window.addEventListener('storage', callback); return () => window.removeEventListener('storage', callback); } function getSnapshot() { return localStorage.getItem('myValue') || 'default'; } function getServerSnapshot() { return 'default'; // Or fetch from a cookie on the server } function MyComponent() { const value = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot); const [localValue, setLocalValue] = useState(value); useEffect(() => { setLocalValue(value); }, [value]); const setValue = (newValue) => { localStorage.setItem('myValue', newValue); }; const handleInputChange = (event) => { setValue(event.target.value); }; return ( ); } export default MyComponent; ```

この例では：

• subscribe: windowオブジェクトのstorageイベントをリッスンします。このイベントは、別のタブやウィンドウによってlocalStorageが変更されたときに発生します。
• getSnapshot: localStorageからmyValueの値を取得します。
• getServerSnapshot: サーバーサイドレンダリング用にデフォルト値を返します。ユーザーが以前に値を設定していた場合は、クッキーから取得することもできます。
• MyComponent: useSyncExternalStoreを使用してlocalStorageの変更をサブスクライブし、現在の値を表示します。

高度な使用例と考慮事項

1. サードパーティの状態管理ライブラリとの統合

useSyncExternalStoreは、Reactコンポーネントを外部の状態管理ライブラリと統合する際に真価を発揮します。Zustandを使用した例を見てみましょう：

```javascript import { useSyncExternalStore } from 'react'; import { create } from 'zustand'; const useStore = create((set) => ({ count: 0, increment: () => set((state) => ({ count: state.count + 1 })), decrement: () => set((state) => ({ count: state.count - 1 })), })); function MyComponent() { const count = useSyncExternalStore( useStore.subscribe, useStore.getState, useStore.getState // Initial state on the server ).count; const increment = useStore((state) => state.increment); const decrement = useStore((state) => state.decrement); return ( ); } export default MyComponent; ```

この例では、useSyncExternalStoreがZustandストアの変更をサブスクライブするために使用されています。useStore.subscribeとuseStore.getStateを直接フックに渡すことで、統合がシームレスになっていることに注目してください。

2. メモ化によるパフォーマンスの最適化

getSnapshotはすべてのレンダリングで呼び出されるため、パフォーマンスが高いことを確認することが重要です。getSnapshot内で高コストな計算を避けてください。必要であれば、useMemoや同様のテクニックを使用してgetSnapshotの結果をメモ化してください。

この（潜在的に問題のある）例を考えてみましょう：

```javascript import { useSyncExternalStore, useMemo } from 'react'; const externalStore = { data: [...Array(10000).keys()], // Large array listeners: [], subscribe(listener) { this.listeners.push(listener); return () => { this.listeners = this.listeners.filter((l) => l !== listener); }; }, setState(newData) { this.data = newData; this.listeners.forEach((listener) => listener()); }, getState() { return this.data; }, }; function ExpensiveComponent() { const data = useSyncExternalStore( externalStore.subscribe, () => externalStore.getState().map(x => x * 2) // Expensive operation ); return (

{data.slice(0, 10).map((item) => (
• {item}
))}

); } ```

この例では、getSnapshot（useSyncExternalStoreの第2引数として渡されたインライン関数）が大きな配列に対して高コストなmap操作を実行します。この操作は、元になるデータが変更されていなくても、*すべての*レンダリングで実行されます。これを最適化するために、結果をメモ化することができます：

```javascript import { useSyncExternalStore, useMemo } from 'react'; const externalStore = { // ... (same as before) }; function OptimizedComponent() { const data = useSyncExternalStore( externalStore.subscribe, () => { return useMemo(() => externalStore.getState().map(x => x * 2), [externalStore.getState()]); } ); return (

{data.slice(0, 10).map((item) => (
• {item}
))}

); } ```

これで、map操作はexternalStore.getState()が変更された場合にのみ実行されます。注意：ストアが同じオブジェクトをミューテートする場合、実際には`externalStore.getState()`をディープ比較するか、別の戦略を使用する必要があります。この例はデモンストレーションのために単純化されています。

3. コンカレントレンダリングの処理

useSyncExternalStoreの主な利点は、Reactのコンカレントレンダリング機能との互換性です。コンカレントレンダリングにより、Reactは複数のバージョンのUIを同時に準備できます。コンカレントレンダリング中に外部ストアが変更された場合、useSyncExternalStoreは、ReactがDOMに変更をコミットする際に常に最新のデータを使用することを保証します。

useSyncExternalStoreがなければ、コンポーネントは古いデータでレンダリングされ、視覚的な不整合や予期せぬ動作を引き起こす可能性があります。useSyncExternalStoreのgetSnapshotメソッドは同期的で高速に設計されており、Reactがレンダリング中に外部ストアが変更されたかどうかを迅速に判断できるようになっています。

4. サーバーサイドレンダリング（SSR）に関する考慮事項

サーバーサイドレンダリングでuseSyncExternalStoreを使用する場合、getServerSnapshot関数を提供することが不可欠です。この関数は、サーバー上で外部ストアの初期値を取得するために使用されます。これがないと、Reactはサーバー上でgetSnapshotを使用しようとしますが、外部ストアがブラウザ固有のAPI（例：localStorage）に依存している場合は不可能かもしれません。

getServerSnapshot関数は、デフォルト値を返すか、サーバーサイドのソース（例：クッキー、データベース）からデータを取得すべきです。これにより、サーバーで最初にレンダリングされるHTMLに正しいデータが含まれることが保証されます。

5. エラーハンドリング

堅牢なエラーハンドリングは、特に外部データソースを扱う場合に重要です。潜在的なエラーを処理するために、getSnapshotおよびgetServerSnapshot関数をtry...catchブロックでラップしてください。エラーを適切にログに記録し、アプリケーションがクラッシュするのを防ぐためにフォールバック値を提供してください。

6. 再利用性のためのカスタムフック

コードの再利用性を促進するために、useSyncExternalStoreロジックをカスタムフック内にカプセル化します。これにより、複数のコンポーネント間でロジックを簡単に共有できます。

例えば、localStorageの特定のキーにアクセスするためのカスタムフックを作成してみましょう：

```javascript import { useSyncExternalStore } from 'react'; function useLocalStorage(key, defaultValue) { function subscribe(callback) { window.addEventListener('storage', callback); return () => window.removeEventListener('storage', callback); } function getSnapshot() { return localStorage.getItem(key) || defaultValue; } function getServerSnapshot() { return defaultValue; } const value = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot); const setValue = (newValue) => { localStorage.setItem(key, newValue); }; return [value, setValue]; } export default useLocalStorage; ```

これで、このフックをどのコンポーネントでも簡単に使用できます：

```javascript import useLocalStorage from './useLocalStorage'; function MyComponent() { const [name, setName] = useLocalStorage('userName', 'Guest'); return ( ); } ```

ベストプラクティス

• getSnapshotを高速に保つ: getSnapshot関数内で高コストな計算を避けてください。必要であれば結果をメモ化してください。
• SSRにはgetServerSnapshotを提供する: サーバーで最初にレンダリングされるHTMLに正しいデータが含まれるようにしてください。
• カスタムフックを使用する: useSyncExternalStoreロジックをカスタムフックにカプセル化して、再利用性と保守性を向上させてください。
• エラーを適切に処理する: getSnapshotとgetServerSnapshotをtry...catchブロックでラップしてください。
• サブスクリプションを最小限に抑える: コンポーネントが実際に必要とする外部ストアの部分のみをサブスクライブしてください。これにより、不要な再レンダリングが削減されます。
• 代替案を検討する: useSyncExternalStoreが本当に必要かどうかを評価してください。単純なケースでは、他の状態管理技術の方が適切な場合があります。

useSyncExternalStoreの代替案

useSyncExternalStoreは強力なツールですが、常に最良の解決策とは限りません。以下の代替案を検討してください：

• 組み込みの状態管理（useState, useReducer, Context API）: データがReactコンポーネントツリーと密接に結合している場合、これらの組み込みオプションで十分なことが多いです。
• React Query/SWR: データフェッチには、これらのライブラリが優れたキャッシング、無効化、エラーハンドリング機能を提供します。
• Zustand/Jotai/Valtio: これらのミニマリストな状態管理ライブラリは、アプリケーションの状態を管理するためのシンプルで効率的な方法を提供します。
• Redux/MobX: グローバルな状態を持つ複雑なアプリケーションには、ReduxやMobXの方が適している場合があります（ただし、より多くのボイラープレートが導入されます）。

選択は、アプリケーションの特定の要件に依存します。

結論

useSyncExternalStoreはReactのツールキットへの貴重な追加機能であり、コンカレントレンダリングとの互換性を維持しながら、外部の状態ソースとのシームレスな統合を可能にします。その目的、実装、高度な使用例を理解することで、このフックを活用して、さまざまなソースからのデータと効果的に相互作用する堅牢でパフォーマンスの高いReactアプリケーションを構築できます。

useSyncExternalStoreを使用する前に、パフォーマンスを優先し、エラーを適切に処理し、代替ソリューションを検討することを忘れないでください。慎重な計画と実装により、このフックはReactアプリケーションの柔軟性とパワーを大幅に向上させることができます。

さらなる探求

• useSyncExternalStoreのReact公式ドキュメント
• さまざまな状態管理ライブラリ（Zustand、Jotai、Valtio）との使用例
• useSyncExternalStoreと他のアプローチを比較したパフォーマンスベンチマーク