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

2022.01.12

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

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

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

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

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

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

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

useEffectで囲う範囲が以下のような場合

useEffect(() => {
  console.log('後に実行される')
}, []);

return () => {
  console.log('先に実行される')
};

この場合、JSX内が先に実行され、useEffectは後に実行される。

つまり！コンポーネントが描画された後にuseEffectは実行される！

だから、コンポーネントの最新のpropsにアクセスすることができる。

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

コメント