React19.2のuseEffectEventを追う

2025/10/17 トリックオアトリート！若手エンジニアふんわりLT Night！の登壇資料です。
https://wakate-funwari-study.connpass.com/event/368151/

※2025/10/21資料微修正
22ページ目以降のuseEffectEventのuseEffectの依存配列に余分なイベントハンドラが入っていたので削除。

Transcript

1. React19.2のuseEffectEvent を追う 2025/10/17 トリックオアトリート！若手エンジニアふんわりLT Night！ マグロ/佐々木陽貴
2. 自己紹介 名前:マグロ 本名:佐々木陽貴(sasaki haruki) 所属:株式会社くふうカンパニー(24卒サーバーサイド) コメント:ポケモンZAが発売されましたが気にせずバニーガー デンをプレイしてます。
3. React19.2のuseEffectEvent を追う
4. React19.2のuseEffectEvent を追う え？なんで追うかって？
5. こんなCfPが通ってしまったからだよ！！！！
6. こんなCfPが通ってしまったからだよ！！！！ 下手すりゃ燃える内容だよ ... ちゃんと勉強しないとね
7. 今回はこのCfPの下書き的な 要素も含みます
8. そもそもuseEffectって？ コンポーネントを外部システムと同期するためのHooks。
9. そもそもuseEffectって？ コンポーネントを外部システムと同期するためのHooks。 useEffect(setup, dependencies?) setup: エフェクトのロジックを記述 dependencies: 依存配列。この値が更新されるとsetupが実行される。(省略可) なし:レンダリングごとに実行 空配列:初回レンダリングのみ
10. そもそもuseEffectって？ コンポーネントを外部システムと同期するためのHooks。 外部システムの例 - DOM(仮想DOMじゃない実要素) - イベントリスナーやブラウザ API - ネットワーク通信(API / WebSocket) - ブラウザのストレージ(localStorage, sessionStorage) - タイマー・スケジューラ - 外部ライブラリ(非 React ベース)
11. そもそもuseEffectって？ この外部イベントに対して使用するべきで、それ以外の用途は推奨されない。
12. そもそもuseEffectって？ この外部イベントに対して使用するべきで、それ以外の用途は推奨されない。 こんなコード書いたことありませんか？？ React公式ドキュメント「そのエフェクトは不要かも」より
13. そもそもuseEffectって？ この外部イベントに対して使用するべきで、それ以外の用途は推奨されない。 こう表せます！！ React公式ドキュメント「そのエフェクトは不要かも」より
14. そもそもuseEffectって？ これ以上話すと長くなるので、続きはこちらで
15. useEffectEventとは？ エフェクト内で使うコールバック関数を、最新の値に同期させつつもエフェクトを再実行さ せないためのHooks。
16. useEffectEventとは？ エフェクト内で使うコールバック関数を、最新の値に同期させつつもエフェクトを再実行さ せないためのHooks。 useEffectEvent(callback) callback:エフェクト内で実行される関数ロジックを記述。 stateやpropsは最新の状態を使用することができる。
17. useEffectEventとは？ エフェクト内で使うコールバック関数を、最新の値に同期させつつもエフェクトを再実行さ せないためのHooks。
18. useEffectEventとは？ useEffectを書く時にこんなこと起きたことありませんか？ 例：handlerで最新のcountの状態を取得したい場合。 ※このサンプルコードは useEffect不要で表現で きますが、説明のため あえて使ってます。
19. useEffectEventとは？ useEffectを書く時にこんなこと起きたことありませんか？ 例：handlerで最新のcountの状態を取得したい場合。 countが更新される たびにイベントリス ナーが再登録され てしまう =不要な副作用が 発生する countを入れる必 要がある
20. useEffectEventとは？ useEffectを書く時にこんなこと起きたことありませんか？ 例：handlerで最新のcountの状態を取得したい場合。 ただし依存配列に含めないと最新のcountが取得できない。(エフェクトの中身のcountは 初回レンダリング時のもののため)
21. useEffectEventとは？ 不要なエフェクトは減らしたいが、最新のstateの状態も欲しい...
22. useEffectEventとは？ 不要なエフェクトは減らしたいが、最新のstateの状態も欲しい... そこでuseEffectEvent
23. useEffectEventとは？ 不要なエフェクトは減らしたいが、最新のstateの状態も欲しい... そこでuseEffectEvent ここのcountは常 に最新の状態を 持つ 　countへの依存が無くなる =不要なエフェクトが減る
24. useEffectEventとは？ useEffectEventを利用することで不要な依存配列を減らせた！ また、useEffectの記述も減ったので可読性も上がった！！
25. まとめ useEffectEventは「エフェクトの実行タイミング」と「エフェクト内の関数」を分離してくれ る。 それにより「不要なエフェクトの実行」や「useEffectのコードの複雑さ」を抑制することが できる。 最新の機能だが今後多くの場面で使われることが予想される。