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

React

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

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

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

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

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

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

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

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

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

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

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

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

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

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

コメント