【React】useEffectとはなんなのか？ - iOSエンジニアのつぶやき

useEffectとは？

useEffectは、Reactのコンポーネントがレンダリングされた後にフックされる特別な関数です。

毎回呼ばれるの？

公式ドキュメントにも載っているような、下記のシンプルな例の場合では、毎回レンダリング後にuseEffectが呼ばれます。

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

初回レンダリング時や、関数内で使用している値に変更があるレンダリングの時だけ、useEffectを呼び出したい場合は第二引数をそれぞれ設定する必要があります。

まずは、下記が初回レンダリング時のみ実行する例です。

  useEffect(() => {
    document.title = `You clicked ${count} times`
  }, [])

次は、関数内で使用している値に変更があった時だけ実行する例です。

  useEffect(() => {
    document.title = `You clicked ${count} times`
  }, [count])

このように第二引数には、useEffect関数内で依存する値を配列で設定する必要があります。配列を指定しない場合は、無限ループなどに陥る可能性などもあるので、基本的には依存する値を入れておくと良さそうです。

何を返す？

useEffectでは戻り値を設定しなくても問題ないですが、クリーンアップ関数と言って、前回のuseEffectで実行した関数の副作用を消す処理を追加することもできます。一般的には、タイマーのキャンセルやイベントリスナーの削除などに用いられることが多いようです。

てな感じ本日も以上となります🍺

参考

その他の記事

yamato8010.hatenablog.com