ReactのuseEffectとは

React
Reactその他
この記事は約3分で読めます。

関数コンポーネント本体に書くと、副作用が生じてバグなどを引き起こしがちな関数(処理)の置き場にuseEffectが利用できます。
なお、副作用とはその関数以外に影響を与える処理を指します(例:外部データの取得、DOMの変更など)。

useEffectは、Reactで定義したUIコンポーネントがレンダーされて画面に反映された後、useEffectの第一引数に記述した処理を実行します。
useEffectに関数などの処理を記述することで、その関数の実行をレンダー後に遅らせることができます。

useEffectは以下のように記述します。

  useEffect(() => {
    console.log("useEffect");
  }, []);

上記では、console.logが第一引数で、空の配列 [] が第二引数です。
第一引数がレンダー後に行う処理で、第二引数が第一引数の処理を実行するタイミングを制御する配列データを表します。

第二引数は、

  • 要素が含まれた配列を渡すと、前回渡した配列要素の値と比較し、値が異なる場合に限り第一引数の処理を実行
  • 空の配列を渡すと初回レンダリング時のみ第一引数の処理を実行
  • 省略するとレンダリングするたびに第一引数の処理を実行

します。

例えば、以下のようなコードがあるとします。
useEffectの第二引数にcount変数を渡しているため、レンダリング後にこのcount変数の値が変わっていると、第一引数の処理が実行されます。
count変数の値が変わっていない場合、処理は実行されません。

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

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

  useEffect(() => {
    document.title = `${count} 回目`;
  },[count]);

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

export default App;

useEffectの第二引数を空の引数にしてみます。
初回レンダリング時のみ第一引数の処理が実行されるため、タイトルはボタンをクリックしてもずっと「 0 回目」になります。

  useEffect(() => {
    document.title = `${count} 回目`;
  },[]);

useEffectの第二引数を省略してみます。
毎回レンダリングされるので、ボタンをクリックするたびにタイトルが変更されます。

  useEffect(() => {
    document.title = `${count} 回目`;
  });
タイトルとURLをコピーしました