ReactのuseEffectとは

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

副作用への理解の助けになった記事

背景 ReactやReduxの記事やドキュメントを呼んでいると、度々「副作用」という単語を目にします。医薬品における副作用しか連想できなかったので、ちゃんと調べてみました。プログラミングにおける副作用とは副作用は「プロ...

Redux-Saga：サイドエフェクトの管理 | NHN Cloud Meetup

Redux-Saga：サイドエフェクトの管理 React、Redoxを活用して、Webアプリケーションを開発した際、非同期処理などのサイドエフェクト（Side effects）について試行錯誤を繰り返したことがありませんか？React、Redoxは、関数の応用、純粋関数、不変性などの関数型プログラミングを目指し、サイド...

「ReactはただのUIフレームワークである」ということをもっと伝えたい

こんにちは。株式会社インプルの加納です。Reactの経験が増えるにつれ、人に教える場面も増えました。色々なご質問をいただくのですが「難しく考えすぎている」ケースも多い印象です。React はその公式ドキュメントのトップにもあるように「UIを

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} 回目`;
  });