[react] レンダリング時に毎回実行したい処理をどこに書くべきか？

概要

useEffectの第2引数を指定しないとレンダリングの度に処理が実行されるが、それは関数コンポーネント内に直接書いた処理と何が違うのか。

[react] useEffectが実行されるタイミング

概要 reactのuseEffectフックは第2引数によって実行されるタイミングが異なる。 第2引数なしレンダリングされる度に実行されるクラスコンポーネントのcomponentDidUpdateメソッドと同等 第2引数が空配列マウント時のみ実行されるクラスコンポーネントのcomponentDidMountメソッドと同等 第2引数が変数を要素に持った配列マウント時および変数が更新された際に実行される...

ageo-soft.info

2023.03.16

例えば、以下の処理ではinitializeとupdateは初回のレンダリング時やstateの更新時など同じタイミングでコンソールに出力される。

const Sample = () => {
  const [num, setNum] = useState(0);
  console.log("initialize");
  useEffect(() => {
    console.log("update");
  });
  return (
    <button onClick={()=>{setNum(num+1)}}>plus</button>
  )
}
export default Sample;

以上のことをQiitaに質問として投稿してみたところ、とてもわかりやすい答えをもらうことができた。

回答していただいた2人の方には感謝です、ありがとうございました。

[Q&A] Reactの関数コンポーネントに書いた処理とuseEffectフックの違いについて - Qiita

qiita.com

結論

1. クリーンアップが必要な場合はuseEffectを使う。
   unsubscribe, closeなど。
2. 非同期処理（async, await）を使う場合はuseEffectを使う。
3. 使わなくて良い場合はuseEffectを避ける。