エフェクトフック

フックは、状態と他の反応機能を使用する能力を我々に代わりにクラスベースの構成要素を書く機能を与えます.
最も使用されるフックの1つは有効です.このフックは、ライフサイクルメソッドのようなものを機能的なコンポーネントで使用することを可能にします.
UseEffectの最初の引数は常に関数であり、2番目の引数は依存関係の配列です.この引数は、関数を実行したいときに制御することができます.
UseEffectフックを使用する場合は、インポートする必要があります.

import { useEffect } from 'react';

使用には3つの方法があります.

コンポーネントが初めてのみレンダリングされると

  //Run at initial render 
  useEffect(() =>{
    console.log("Run at initial render ");   
  }, []); 

空の配列とコードを渡す必要はありません

コンポーネントが最初に表示され、毎回配列の依存関係が変更されたとき

  //Run at initial render and every render if total has changed 
  useEffect(() =>{
    console.log("Total has changed to: "+total); 
  }, [total]); 

必要に応じて配列を渡すことができます.1つ以上の値を渡すことができ、1つの変数が変更されるたびに、関数が実行されます.

コンポーネントが最初に表示されるたびに、それが

useEffect(() =>{    
    console.log("First time and after every render "); 
  });

このメソッドを使用すると、配列を渡しません.
特に、依存関係が宣言されていない場合は、無限ループに陥る可能性があります.

簡単な例here