もう迷わない！ useEffectEventでエフェクトイベント分離

2026/1/23 React Tokyo #13

Transcript

1. もう迷わない！ useEffectEventでエフェクトイベント分離 伊澤 遼介 2026/1/23 React Tokyo #13
2. React Tokyo フェス 2026でポスター発表します！！ チームで楽しく事業貢献したいエンジニア！ フロントエンドバックエンド問わず ‧React、Next.js、Go 伊澤 遼介 Izawa Ryosuke 趣味 ‧ランニング、サッカー、メジャーリーグ ‧Chrome拡張機能開発、エディタ拡張機能開発 （とにかく楽しく開発したい）
3. QRコードからカジュアル⾯談の 案内ページに⾶べます！🚀 「挑戦し、変化し、リードする仲間」を募集中 カジュアル⾯談も実施しています！ 興味がある⽅、ぜひ⼀度お話しましょう🙌 3
4. 2022年にuseEventとしてRFCされ、 3年の時を超えて正式リリース👏 React Conf 2025 React19.2で正式リリースされたuseEffectEvent
5. React Conf 2025のハイライトを書きました！！ React TokyoのZenn記事に React Conf 2025 ハイライトの記事を書いたのでよければご覧ください 👀
6. useEffectEventってどんな機能？？ エフェクト内で最新の値を使いたいけど、 その値が変わった時に Effectを再実行したくない時に使える Hook （エフェクトから非リアクティブなロジックを、エフェクトイベントに分離できる！）
7. useEffectEventが出る前に遭遇したこと（モヤモヤ） 󰢃themeを依存配列に加えると、 Dark Themeに変えた時に再レンダリングが起こり、roomが再接続される 👈roomIdが変わっ た時に、最新の themeで通知を出し たい。 👈でもthemeが変 わった時に再実⾏し たくない。
8. 解決策1：themeを依存配列から外して、Lintを無効化する 󰢃themeを依存配列から外すことはできたが Lintを無効化したことで今後のバグが⼼配。
9. 解決策2：useRefを使う うまくできた感。とこれでいいのか感は残る
10. 解決策3：useEffectEventを使う（19.2から使える✨） ・エフェクトから非リアクティブなロジックをエフェクトイベントに分離 ・依存配列から外せる 👈showNotificationを useEffectから分離できて いる
11. c あくまで、エフェクトから発⽕するイベントの時に使う。 ⚠ 注意点1：使い所に気をつける 詳しくは👇 エフェクトからイベントを分離する - React https://ja.react.dev/learn/separating-events-from-effects#extracting-non-reactive-logic-out-of-effects ※Linterのエラーを黙らせるためだけに使わない
12. ⚠ 注意点2：イベントハンドラとエフェクトの違いをおさえる 詳しくは👇 エフェクトからイベントを分離する - React https://ja.react.dev/learn/separating-events-from-effects#extracting-non-reactive-logic-out-of-effects ‧イベントハンドラ：ユーザーの操作に反応したい ‧エフェクト：外部システムと同期したい ‧エフェクトイベント：エフェクト内で最新の値を使いたいが、再実⾏したくない
13. ここからは時間があれば󰢛 （もしかしたら駆け⾜になるかもしれません）
14. ・state/propsが変わる Reactの3つのフェーズ ・コンポーネント関数を実行 ・DOM更新、useEffect実行 ご興味のある⽅はこちらから👇 https://ja.react.dev/learn/render-and-commit
15. useEffectEventの実装を覗く👀 packages/react/src/ReactHooks.jsから始まる resolveDispatcher()でdispatcherを取得して callbackを受け取ってdispatcherに渡している （ここまではhooksでよくある流れ） ご興味のある⽅はこちらから👇 https://github.com/facebook/react
16. dispatcherはコンテキストに応じて変わる resolveDispatcherでdispatcherに ReactSharedInternals.Hをセット renderWithHooksで ReactSharedInternals.Hに HooksDispatcherOnMounttか HooksDispatcherOnUpdateをセット ※renderWithHooksはコンポーネント関数が呼ばれる前に必ず 呼ばれる（レンダーの段階） 最終的に、 dispatcherには 初回レンダリングの時は HooksDispatcherOnMount 再レンダリングの時は HooksDispatcherOnUpdate がセットされる。 resolveDispatcher()
17. dispatcherのuseEffectEventプロパティには ・HooksDispatcherOnMountの場合は mountEvent ・HooksDispatcherOnUpdateの場合は updateEvent がセットされる。 dispatcher.useEffectEventプロパティ 前のスライドで dispatcherは HooksDispatcherOnMountか HooksDispatcherOnUpdateであることがわかった
18. updateEvent ・hookからrefを取り出す ・新しい callbackをキューに追加 ・eventFn を返す ※commitフェーズで ref.impl が最新に更新される mountEvent ・{impl: callback} のrefオブジェクトを作成 ・hookに保存 ・eventFnを返す mountEvent、updateEvent
19. ・roomIdが変わって再レ ンダリングが発生する Reactの3つのフェーズ ・コンポーネント関数を実行 ・mountEvent/updateEventが呼 ばれる ・ref.implの更新が予約される （キューに追加） ・ref.implが更新される （useEffectEventの中の値が最新に） ・DOMを更新する ・useEffectのコールバックを実行 ご興味のある⽅はこちらから👇 https://ja.react.dev/learn/render-and-commit
20. commitRoot( ‧commitBeforeMutationEffects👈 ref.impl更新 ‧flushMutationEffects 👈DOM更新 ‧flushLayoutEffects 👈useLayoutEffect ‧flushPassiveEffects 👈 useEffect ※⼀部省略 ) コミットフェーズでref.implを更新 Reactのコミットフェーズ 👉 ref.implはuseEffectより先に更新されるから、   依存配列に⼊れなくても最新の値が使える！
21. まとめ React内部の実装を覗くことにより 新しい発見があり、とても勉強になりました。 React Tokyo Fes 2026ではポスター発表をする予定です。 よければ、お越しいただけると幸いです 󰢛