useEffect関数の実行タイミング

useEffectを使うと、useEffectに渡された関数はレンダーの結果が画面に反映された後に動作します。

つまりuseEffectとは、「関数の実行タイミングをReactのレンダリング後まで遅らせるhook」です。

副作用の処理（DOMの書き換え、変数代入、API通信などUI構築以外の処理）を関数コンポーネントで扱えます。

useEffect()の基本構文は以下の通りです。関数コンポーネントのトップレベルで宣言します。

useEffect(() => {
  /* 第1引数には実行させたい副作用関数を記述*/
  console.log('副作用関数が実行されました！')
},[依存する変数の配列]) // 第2引数には副作用関数の実行タイミングを制御する依存データを記述

第2引数を指定することにより、第1引数に渡された副作用関数の実行タイミングを制御することができます。Reactは第2引数の依存配列の中身の値を比較して、副作用関数をスキップするかどうかを判断します。

	説明	データ型
第1引数	副作用関数（戻り値はクリーンアップ関数、または何も返さない）	関数
第2引数	副作用関数の実行タイミングを制御する依存データが入る（省略可能）	配列

useEffect(() => {
document.title =${count}回クリックされました
console.log(再レンダーされました)
},[count])

副作用関数を初回レンダリング時の一度だけ実行させたい場合、第2引数に空の依存配列[]を指定します。

この場合、初回レンダリング時のみ副作用関数が実行され、document.titleは更新されません。

  useEffect(() => {
    document.title =`${count}回クリックされました`
    console.log(`再レンダーされました`)
  },[])

useEffectの第二引数なし

useEffect(() => {
document.title =${count}回クリックされました
})