こんにちは。フロントエンドの現場で、日々Reactという不思議な生き物と格闘しているアーキテクトです。
Reactを学び始めると、誰もが一度は「あれ？画面の数字が変わらないぞ？」とか「外部からデータを取ってきたのに、表示が古いまま？」といった壁にぶつかりますよね。実はこれ、Reactが「自分の管理外の世界」とどう付き合うかという、少しデリケートな問題なんです。
今日は、そんなReactの「お外の世界」との同期を劇的にスマートにする、ちょっと魔法のようなAPI『useSyncExternalStore』について、お話ししましょう。
—
1. 「Reactの管理下」と「外の世界」
まずは、イメージしてみてください。Reactの世界は、「自分の家の冷蔵庫の中身」を管理するのが得意な、とても几帳面な主婦のようなものです。冷蔵庫の中身（State）が変われば、すぐに「あ、卵が減ったから買い足さなきゃ！」と画面を更新（レンダリング）してくれます。
ところが、世の中には「家の外にある共有の冷蔵庫」もありますよね。例えば、Reduxのような状態管理ライブラリや、ブラウザのウィンドウサイズ、あるいはサーバーから届くリアルタイム通知などです。
これらはReactの直接の管轄外です。「外の冷蔵庫が空になっても、家の中の主婦（React）は気づかない」。これが、よくある「データは変わっているのに画面が更新されない」問題の正体です。
2. 昔ながらの「頑張る」副作用
これまで、私たちはこの問題を解決するために `useEffect` を使ってきました。
「外の冷蔵庫を見張る係」を `useEffect` で配置して、変化があったら「主婦さん！中身が変わりましたよ！」と無理やり `useState` を叩いて知らせる……。
でも、これには「タイミングのズレ（ティアリング）」という問題がありました。主婦が気づくまでにコンマ数秒のラグがあったり、一度にたくさんの更新が重なると、画面がチラついてしまったり。
そこで登場したのが、`useSyncExternalStore` です。
3. useSyncExternalStore は「専属の連絡係」
このAPIは、Reactに対してこう伝えます。
「外の冷蔵庫の様子を直接見に行こうとしないでいい。代わりに、この『連絡係』に聞いて。変更があれば、この連絡係が確実に、かつタイミングを合わせるように教えてくれるから」
これを使うと、Reactは外部の変化に対して、まるで自分の家の冷蔵庫を覗くのと同じくらい正確に反応できるようになります。
サンプルコードで見てみよう
例えば、「ブラウザのウィンドウサイズ」という外部の状態を監視する例で考えてみましょう。
import { useSyncExternalStore } from ‘react’;
// 1. 外部ストアの「購読（お買い物メモを渡して監視する）」関数
function subscribe(callback) {
window.addEventListener(‘resize’, callback);
// クリーンアップ（監視をやめる）処理も忘れずに！
return () => window.removeEventListener(‘resize’, callback);
}
// 2. 現在の値を取得する関数
function getSnapshot() {
return window.innerWidth;
}
export function WindowWidthComponent() {
// ここで「連絡係」を呼び出します
const width = useSyncExternalStore(subscribe, getSnapshot);
return (
今の横幅は：{width}px です
※ブラウザのサイズを変えてみてください。遅延なく同期されます！
);
}
4. なぜこの書き方が「最高」なのか
ポイントは3つです。
1. シンプルさ: `useEffect` で `useState` を更新して……という複雑なダンスを踊る必要がありません。
2. 安全性: Reactが「今、この情報を更新しても安全かな？」と計算してから反映してくれるため、画面のチラつき（ティアリング）が起きにくいんです。
3. クリーンアップが明示的: `subscribe` 関数の中でイベントリスナーを登録し、その戻り値として「解除関数」を返す。この一連の流れが非常に綺麗で、バグを生みにくい設計になっています。
最後に：つまずくのは当たり前です
「`useSyncExternalStore` なんて初めて聞いたし、なんだか難しそう」と思っても、まったく落ち込む必要はありません。これは、Reactがより高度な描画性能を追い求める中で生まれた、比較的新しい「おもてなし」ツールです。
最初は「`useState` で頑張る」という経験を積むことが大切です。その先に、「あれ、これだと動きがカクつくぞ？」「もっと同期を正確にしたいな」という悩みが出てきたとき、このツールはあなたの最強の武器になります。
Reactとの付き合いは、焦らず、少しずつ仲良くなっていけば大丈夫。
もし今、外部データとの連携で悩んでいたら、ぜひこの魔法のAPIを思い出してみてくださいね。
それでは、また次回の解説でお会いしましょう！応援しています。
コメント