useEffectに書いた処理が実行されるタイミング

useEffect内の処理はマウント時 + 依存配列内の変数の値が変更された時に実行される。

• useEffectの第二引数である依存配列[]に何も入れなかった時は初期レンダリング後のみ（コンポーネントに書いた記述がDOM構成に反映された後）実行される。
• 依存配列に変数を指定した場合は 初期レンダリング後 + 依存配列内の変数の値が変更された時に実行される
• アンマウント時に実行される、と言われるのは下記の return () => {} に書いた記述がコンポーネントが画面から消えるときに実行されるクリーンアップ関数のこと。つまり、クリーンアップ関数を書かなければアンマウント時はなにも実行されない。

UseEffect.tsx

 useEffect(() => {
  // ここに副作用を実行するコードを記述

  // クリーンアップ関数を返す
  return () => {
    // コンポーネントのアンマウント時に実行されるコード
  };
}, [/* 依存配列 */]);