ReactのuseEffectフック完全ガイド！基本構文から実践例までわかりやすく解説

React開発チームは、Reactバージョン16.8で「Hooks（フック）」という概念を導入しました。React Hookを使うことで、関数コンポーネント内でもstateやその他のReact機能を利用できるようになります。代表的なHookであるuseStateを使えば、クラスコンポーネントに書き換えることなく、関数コンポーネントだけで内部状態を管理できます。

もうひとつ広く使われているのがuseEffectです。useEffectを使うと、関数コンポーネントの文脈の中で「副作用（サイドエフェクト）」と呼ばれる処理を実行できます。

副作用とは、関数がその本体の外側にある何かを変更する場合に発生するものです。Reactでも同様で、具体的には以下のような処理が該当します。

• APIなどからのデータ取得
• サブスクリプション（購読）の設定
• DOMの手動操作・変更

useEffectとは？

React HookのuseEffectは、関数コンポーネント内で副作用を実行するための仕組みです。その動作は、クラスコンポーネントにおけるライフサイクルメソッドであるcomponentDidMount、componentDidUpdate、componentWillUnmountに似ています。

この記事では、Hooksの基本的な使い方を入門レベルで紹介します。深く掘り下げた内容ではなく、あくまで導入部分としてお読みください。useEffectについてさらに詳しく知りたい方は、まずこの記事で基礎を理解してから、公式ドキュメントの詳細な解説を参照することをおすすめします。

React Hooksの基本構文

useEffectを理解するために、まずuseState Hookの構文を簡単におさらいしましょう。Hookを使用する際は、React本体をインポートするときと同じように、明示的にインポートする必要があります。

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

これで、関数コンポーネントの中にHookを定義できるようになりました。ここではJavaScriptの関数スコープが活用されています。useEffect Hookを関数コンポーネント内に定義すると、スコープを通じてstateやpropsにアクセスできるのです。

useStateの構文

説明をシンプルにするため、簡単なカウンターを例にします。ボタンがクリックされた回数をDOMに出力するコンポーネントを作成しましょう。インポートを含む関数コンポーネント全体は次のようになります。

import React, {useState, useEffect} from 'react'
import ReactDOM from 'react-dom'

  const ButtonCounter = () => {
    return (
      <button>Click Me</button>
    )
  }

ReactDOM.render(
  <ButtonCounter />,
  document.getElementById('container')
);

これでボタンがDOMに描画されます。useEffectを定義する前に、useState Hookを使って初期状態を設定しておきましょう。

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

この構文では、Reactは最初の変数に初期状態をセットします。この例では、変数「count」にはuseStateに渡した引数の値が入り、初期値として0が設定されます。2番目の変数は、countを更新するための関数として使われます。

countの初期状態を0に設定できたので、setCount関数を使って状態を更新してみましょう。

const ButtonCounter = () => {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked the button {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click Me</button>
      </div>
  )
}

onClickプロパティのコールバック関数としてsetCountを渡すことで、ボタンがクリックされるたびにDOMが更新されます。

これは、useStateで初期状態を設定したときに定義したsetCount関数が正しく動作していることを意味します。useStateの構文が確認できたところで、次はいよいよuseEffectを見ていきましょう。

useEffectの構文

前述のとおり、useEffectは副作用の実行を定義するためのHookです。データ取得によるコンポーネントへの変更や、手動でのDOM変更などはすべて副作用に含まれます。そして重要なポイントとして、useEffectはコンポーネントがレンダリングされるたびに呼び出されます。

この挙動は、クラスコンポーネントのcomponentDidMountとcomponentDidUpdateを組み合わせたものに近い働きをします。カウンターの例を続けて、useEffectを使って<p>要素に名前を表示させてみましょう。

const [count, setCount] = useState(0);
  const [name, setName] = useState(" ");

  useEffect(() => {
    setName(name + "Ryan")
  })
  return (
    <div>
      <p>Hello {name}! You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click Me</button>
      </div>
  )
}

あえてこのコードにはバグが含まれています。DOMに表示される結果を見ると、useEffectがコンポーネントのレンダリングごとに呼び出されていることが分かります。

これは、デフォルトではuseEffect HookがcomponentDidMountとcomponentWillUpdate（更新時の処理）を組み合わせたように振る舞うためです。つまり、マウント時だけでなく、毎回のレンダリング後にも実行されてしまうのです。

依存配列で実行タイミングを制御する

このHookを「コンポーネントがマウントされたときだけ」実行するようにカスタマイズするには、useEffectに第2引数を渡します。空の配列（[]）を第2引数として渡すと、Reactはコンポーネントのマウント時にのみuseEffectを呼び出すようになります。

useEffect(() => {
    setName(name + "Ryan")
  }, [])

これで、「Ryan」という文字列は関数コンポーネントがマウントされたときに一度だけ表示されるようになります。

この第2引数の配列は「依存配列」と呼ばれ、ここに指定した値が変化したときにのみuseEffectが再実行されます。空配列なら初回マウント時のみ、特定のstateやpropsを指定すればその値の変更時にだけ実行される、というわけです。この仕組みを理解することが、useEffectを使いこなす鍵となります。

Hooksに慣れるにはある程度時間が必要です。公式のReactドキュメントにはHooksに関する最新のガイドが用意されているので、ぜひ目を通しておきましょう。

まとめ

このReact useEffect Hookの入門記事では、Hooksとは何か、そしてその使い方を学びました。useStateとuseEffectそれぞれの構文を、初歩的なサンプルコードとともに確認しました。

Hooksの活用範囲は、この入門記事で扱った内容にとどまりません。この記事を読んだら、実際に自分のコードで試しながら、リンク先のリソースにも足を運んで理解を深めていきましょう。クラスコンポーネントがすぐになくなることはありませんが、HooksこそがReactの未来です。常に最新情報をキャッチアップしていきましょう！