【React学習】useEffectについて

記載目的

JavascriptやReactを勉強する過程でuseEffetを利用する必要が出てきたので備忘録的に記載しておく。

useEffectとは

関数コンポーネントのみで使用可能なHook。画面の描画後や更新時に、記載した処理を実行させることができる。つまり、関数の実行タイミングをReactのレンダリング後まで遅らせるHook。
(描画前に何かしたい場合は、useLayoutEffectを使用すること。)
fetch関数を使用して外部のリソースからデータを取得したり、DOMの更新、ロギングなどを行うことができる。
react Classコンポーネントのライフサイクルの下記３つと同様な処理を行うことができるHook。

・ componentDidMount   ：コンポーネントのマウント直後に実行される
・ componentDidUpdate  ：コンポーネントが再描画される度に実行される
・ componentWillUnmount：コンポーネントがアンマウントされて破棄される直前に実行される

使い方

第二引数に記載する内容で、再描画するタイミングを設定することができる

■第二引数を「空欄」とした場合

第二引数を空欄とすることでコンポーネントの表示時と更新時にuseEffectを実行させることができる。

useEffect(()=>{
  //処理
},)

useEffectの実行タイミング

• ブラウザでコンポーネントが初めて表示された直後
• コンポーネントが更新された直後

■第二引数を「[]」とした場合

第二引数を[]とすることでコンポーネント更新時にuseEffect内の処理を実行しないようにできる。

useEffect(()=>{
  //処理
},[])

useEffectの実行タイミング

• ブラウザでコンポーネントが初めて表示された直後

■第二引数を「[state変数]」とした場合

第二引数に追加した[]に特定のstate変数を追加することで、その変数の変化のみを監視し、この変数が更新されるとuseEffectが実行されるようになる。

useEffect(()=>{
  //処理
},[state変数])

useEffectの実行タイミング

• ブラウザでコンポーネントが初めて表示された直後
• state変数が更新されたとき

お願い

もし記載内容に間違いがありましたらご指摘頂けると幸いです。

参考資料

今回勉強した際に下記サイトを参考にさせて頂きました。
初心者でも簡単にわかるReact useEffect, useLayoutEffectの使い方
React hooksを基礎から理解する (useEffect編)