タブ間で Storage イベントを処理する

ユーザーがアプリを2つのタブで開いていて、タブAで値を更新しても、タブBには古い状態が表示されたままです。両方のタブがlocalStorageを共有していても、それぞれがメモリ上に独自のReact状態を持っているからです。

調整を行わなければ、タブ間で現在の値が食い違います。

ブラウザーは、localStorageが変更されるたびに、同じオリジンの他のタブでstorageイベントを発生させます。重要なのは、変更を行ったタブでは発生しないことです。

これは、タブBがタブAで何かが更新されたことを知るために必要なシグナルそのものです。

useEffect内でwindow.addEventListener('storage', handler)を呼び出し、イベントリスナーを削除するクリーンアップ関数を返します。これにより、コンポーネントがタブ間の変更を購読できます。

エフェクトはマウント時に一度だけ実行すればよいため、空の依存配列または安定した依存配列が適しています。

イベントオブジェクトには、key（変更されたキー）、oldValueとnewValue（変更前後の文字列）、storageArea（影響を受けたストレージオブジェクト）が含まれます。

nullのキーとnull値の組み合わせは、ストレージ全体が消去されたことを意味します。

storageイベントはオリジン内のすべてのキーに対して発生するため、ハンドラーは反応する前にevent.key === yourKeyを確認する必要があります。無関係なキーを無視すると、不要な再レンダーを避けられます。

また、event.newValueがnullになる場合、つまりキーが削除された場合も処理します。

関連する変更を受け取ったら、event.newValueをパースし、セッターを呼び出してReactの状態を更新します。これにより、2つ目のタブが別の場所で行われた変更と同期します。

useLocalStorageフックと組み合わせることで、タブ間の同期が完成します。

BroadcastChannelを使うと、同じオリジンのタブ同士がpostMessageで直接メッセージを送信できます。ストレージイベントを流用するよりもすっきりしており、localStorageに書き込まなくても動作します。

名前を指定してチャンネルを作成し、更新を投稿して、messageイベントを監視します。

Reactには、外部ストアを並行レンダリングに安全な方法で購読するためのuseSyncExternalStoreがあります。そのsubscribe関数をstorageイベントに、snapshotをlocalStorageの読み取りに接続できます。

これにより、外部ストレージの更新をReactのレンダリングと正しく統合できます。

典型的な用途は、すべての場所からログアウトさせることです。1つのタブが認証フラグを消去すると、他のタブのstorageイベントがそれを検出し、ログイン画面へリダイレクトします。

これにより、古い状態のタブが認証済みコンテンツを表示し続けるのを防げます。

テーマも適した例です。1つのタブでダークモードを切り替えるとlocalStorageに書き込まれ、他のタブでstorageイベントが発生し、それぞれのテーマ状態がすぐに一致するよう更新されます。

ユーザーはどのタブに切り替えても、一貫した表示を利用できます。

タブ間の同期は、storageイベントを監視するかBroadcastChannelを使い、対象のキーだけに絞り込み、新しい値でReactの状態を更新することで実現できます。

堅牢で並行レンダリングにも安全な購読には、useSyncExternalStoreが最新の選択肢です。

タブ間イベントについて理解度を確認しましょう。

storageイベントが他のタブで発生すること、監視方法、キーによる絞り込み、状態の更新方法を学びました。また、BroadcastChannelとuseSyncExternalStoreという選択肢についても学びました。

すべての場所からのログアウトや、タブ間でのダークモード同期といった実際のユースケースも確認しました。