【React】useEffect の実行タイミング

React

ReactのuseEffectについて、最近新たに知ったことがありましたのでまとめました!

まとめたといってもほんとに大した事ないのですが。

useEffectを使うことで、レンダリング時のその中の要素が実行されるのは、皆様ご承知の通りです。

実はそれに加えて、useEffect内で閉じる直前のコントロールまでできちゃうんです。

つまり、useEffectを使ってできることは以下の2つです。

  • レンダリング(=画面表示)時に実行
  • useEffect内の関数の処理完了後に実行

つまりどういうことかというと、こちらです。

useEffect(() => {
  console.log('画面が表示される瞬間に実行される')
  return () => {
    console.log('画面が消える瞬間に実行される')
  };
}, []);

以上、読んでいただきありがとうございました。

コメント

タイトルとURLをコピーしました