なぜuseEffectは悪者扱いされるのか 〜 useEffectを作ってみて〜

Transcript

1. なぜuseEffectは悪者扱いされるのか 〜 useEffectを作ってみて〜 React Tokyo Meetup #21 2026/10/02
2. 自己紹介 河村 直樹（@iwonder118） 化粧品事業会社でWebエンジニアをしてます 東急多摩川駅でTamagawa.devというのをやってます React Tokyo運営、その他諸々カンファレンススタッフ
3. アジェンダ - これをやろうと思った背景 - React の描画をおさらい - 各セクションのお話 - useEffectのお話 - デバックで追ってみる※出来たら
4. これをやろうと思った背景 フロントエンド &PHPカンファレンス北海道に行った
5. これをやろうと思った背景 JSXを作るセッションとソースコードリーディングのハンズオンに参加
6. これをやろうと思った背景 西村さんありがとうございます
7. これをやろうと思った背景 最近Vue.jsをやることになり Chibi Vueで入門
8. これをやろうと思った背景 Reactも意外と小さくできるのでは？
9. これをやろうと思った背景 実際にあった (Build your own React ) https://pomb.us/build-your-own-react/
10. これをやろうと思った背景 とはいえ量があったのでもっと小さく
11. これをやろうと思った背景 作るものの仕様 - TypeScriptで1ファイルかつ、 100行ほど 300行ほどになってきました - JSXから最終的に DOM操作で画面が更新されるまで (CSR) - HooksはuseState、useEffect(new!)のみ - Fiberを簡略化 - 双方向リンクノードでなく、配列にて保持かつ、一気に描画処理 - className・onClickのみ対応
12. これをやろうと思った背景 注意 - 簡易版のため元の Reactとは仕様が異なります - スケジューリング処理がないので描画が重いと固まります - スケジューリングがないので優先度付も行われません - unMountがないので、 a === b ? <Hello /> : <World />のようなコンポー ネント切り替えができません
13. これをやろうと思った背景 仕様を元に AIといっしょに作業
14. これをやろうと思った背景 Flowじゃないの？
15. これをやろうと思った背景 ごめんなさい
16. これをやろうと思った背景 暖かく見守ってください
17. 完成図 https://github.com/iwonder118/nano-react
18. React の描画をおさらい JSXから描画されるまで - Trigger - 初回レンダリングまたは、setter(useState)からイベント発火 - Render - コンポーネントをjsxからReactElementへの変換 - ReactElementからReactFiberへの変換 - Commit - ReactFiberから実際のDOM操作
19. 各セクションのお話 JSX - tsconfig.jsonで指定 - jsxの設定としてをreact-jsx - jsxIportSourceをnano-reactに設定 - 開発モードのJSXコンパイラが jsxImportSourceからjsxDEV という名前の関数を自動importする コードを生成する仕様になっている
20. useEffectのお話 useEffectとは - コンポーネントを外部システムと同期させるための React フック - API呼び出しや、ブラウザ固有の操作(localstorage、クエリパラメータな ど)の副作用を切り出す - useEffectのお陰でコンポーネントの純粋性が保てる - setup関数と依存配列とsetup関数内で関数をreturnすることでcleanup 関数 - あればcleanup関数->前回と今回の依存配列比較->setup関数実行
21. useEffectのお話 useEffectが描画とどう絡むのか - 初回描画 - Commit完了後にsetup関数を実行する - setup関数の中にtriggerとなるものがあれば再描画が走る - 再描画 - 依存配列の値を用いて描画後にsetup関数を実行する - 前回の描画の値を保持しているので、その値と比較し、差分があれば setup関数を実行する - 描画自体はuseEffectの担当ではない 。あくまで関数内のsetter
22. useEffectのお話 useEffectがなぜ悪者扱いされるのか - 副作用の塊だから - 副作用は命令的であるがゆえに確定出来ない - 宣言的UIのレンダリングの邪魔 - レンダリングが 2回動くきっかけになる - useEffectのsetup関数から値保存でTrigger(setter)を呼ぶことで、もう一 度Trigger・Render・Commitが動き、再レンダリング
23. 宣伝
24. 宣伝 チケット &ストア商品発売中 ‼
25. 宣伝 チケット発売中‼ みんな新潟に行こう‼