NOTE 102 / 2022年
描画の後ろで動く処理を追う
useEffect がいつ動き、どの値を見ているのかを順番に追います。
読了目安 約2分
useEffect は描画の後に実行されます。依存配列に何を入れるかで実行のタイミングが変わり、空の配列なら初回だけ、値を入れたならその値が変わったときだけ動きます。依存を省略すると毎回実行されるため、意図せぬ繰り返しに注意が必要です。
クリーンアップ関数は、次の実行の前と、コンポーネントが外れるときに呼ばれます。イベントの登録やタイマーの解除をここに置くと、状態の漏れを防げます。
押さえたい点
- 01描画の後に実行される
- 02依存配列で実行タイミングを決める
- 03クリーンアップで後始末をする
参考資料
外部サイトが開きます。内容は各サイトの管理下にあります。
- React 学習ガイド 外部サイトreact.dev
- React リファレンス 外部サイトreact.dev
- React で考える 外部サイトreact.dev
- useState リファレンス 外部サイトreact.dev
- useEffect リファレンス 外部サイトreact.dev
- useContext リファレンス 外部サイトreact.dev
- TypeScript ドキュメント 外部サイトtypescriptlang.org
- TypeScript の設定 外部サイトtypescriptlang.org
- MDN Web Docs 外部サイトdeveloper.mozilla.org
- web.dev 外部サイトweb.dev
- W3C WAI 外部サイトw3.org
- GitHub Docs 外部サイトdocs.github.com
- Chrome for Developers 外部サイトdeveloper.chrome.com