Skip to main content

useEffect

useEffect(didUpdate);

副作用を有する可能性のある命令型のコードを受け付けます。

DOM の書き換え、データの購読、タイマー、ロギング、あるいはその他の副作用を、関数コンポーネントの本体（React のレンダーフェーズ）で書くことはできません。それを行うと UI にまつわる、ややこしいバグや非整合性を引き起こします。

代わりに useEffect を使ってください。useEffect に渡された関数はレンダーの結果が画面に反映された後に動作します。副作用とは React の純粋に関数的な世界から命令型の世界への避難ハッチであると考えてください。

デフォルトでは副作用関数はレンダーが終了した後に毎回動作しますが、特定の値が変化した時のみ動作させるようにすることもできます。

useEffectとは​

useEffectを使うと、useEffectに渡された関数はレンダーの結果が画面に反映された後に動作します。 つまりuseEffectとは、「関数の実行タイミングをReactのレンダリング後まで遅らせるhook」です。

副作用の処理（DOMの書き換え、変数代入、API通信などUI構築以外の処理）を関数コンポーネントで扱えます。 今時、クラスコンポーネントは使わないですが、クラスコンポーネントでのライフサイクルメソッドに当たります。

  • componentDidMount
  • componentDidUpdate
  • componentWillUnmount

副作用を実行、制御するためにuseEffectを利用する​

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

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

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

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

初回レンダリング時のみ副作用関数を実行させる​

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

  useEffect(() => {
    console.log('初回レンダリング')
  },[])

依存配列の値が変化した場合のみ副作用関数を実行させる​

useEffect（）の第２引数に[count]を渡すと、countに変化があったときだけ副作用関数を実行します。

  useEffect(() => {
    console.log(count)
    console.log('再レンダーされました')
  },[count])