useEffectとは
コンポーネントがレンダリングされる際に実行したい処理を制御するための機能。
ちなみにコンポーネントが再レンダリングされる条件は以下である
- stateが更新されたとき
- propsが更新されたとき
- 親コンポーネントが再レンダリングされるとき
基本構文
useEffect(() => {
// ① 実行させたい処理
return () => {
// ② ①の処理と対の関係になるクリーンアップ関数（省略可能）
};
}, [依存配列]); // ③ 第１引数の実行タイミングを制御する値
依存配列を空配列にした場合
初回レンダリング時の一度だけ①が実行される。
再レンダリングされても実行されない。
- マウント時：①が実行
- アンマウント時：②が実行
useEffect(() => {
// ① 実行させたい処理
console.log("①");
return () => {
// ② ①の処理と対の関係になるクリーンアップ関数
console.log("②");
};
}, []); // ③ 依存配列を空配列にする
依存配列に値を指定する場合
依存配列に変数countを指定し、countに関心を持たせる。
初回レンダリング時に①が実行されることは変わらないが、その後countが更新されると②、①の順番で実行される。
②が実行 → ①が実行
useEffect(() => {
// ① 実行させたい処理
console.log(`① count：${count}`);
return () => {
// ② ①の処理と対の関係になるクリーンアップ関数
console.log(`② count：${count}`);
};
}, [count]); // ③ 依存配列に変数 count を指定
依存配列を更新して動きを確認してみる
変数countを更新するボタンがあり、ボタンを押すとcountが１ずつ増えていきボタンの上の数字も増えていくというもの。
※文字の大きさが違うのは気にしないでください。スクショが下手なだけです。笑
マウント時（初回レンダリング時）
| View | Console |
|---|---|
 |
 |
２にカウントアップ（countを更新）
| View | Console |
|---|---|
 |
 |
３にカウントアップ（countを更新）
| View | Console |
|---|---|
 |
 |
ここで注目したい部分としては、
②が実行 → ①が実行
の順番で実行されるのだが、②が実行されるときのcountはカウントアップされる前（値が更新される前）の状態で実行されているということである。
①が実行されたときの状態で②が実行されるようである。
使い所としては、
①でリスナーや監視処理をセットして、②で①でセットした処理を解除する
というものが考えられる。
（Reactの公式では、Subscriptionの設定などに触れられていた）
最後に
大変わかりやすく参考にさせていただきました！
ありがとうございました！