useEffectの依存配列の使い分けについて

概要

React Hooksの一つである useEffect は、副作用（データの取得、購読や手動でのDOMの変更など）を実行するためのHookです。この記事では、useEffect の依存配列の使い分けについて詳しく説明します。

基本的な使い方

まずは、useEffect の基本的な使い方から見てみましょう。

"use client";
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>
  );
}

上記のコードでは、ボタンをクリックする度に count ステートが更新され、その結果として useEffect がトリガーされます。そして、document.title が更新されます。つまり、全てのレンダリング後にトリガーされます。

特定の値が変化したときだけトリガーしたい

しかし、全てのレンダリング後に副作用を実行したくない場合はどうすれば良いでしょうか？ここで useEffect の第二引数、依存配列が役立ちます。

"use client";
import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]); // この行に注目

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

上記のコードでは、useEffect の第二引数として [count] を指定しています。これは、count ステートが変更された時だけ useEffect 内の副作用を実行することを意味します。

初回レンダリング時だけトリガーしたい

useEffect 内の副作用はコンポーネントがマウントされた時（初回レンダリング時）だけ実行されます。これは、特定の処理をコンポーネントが画面に最初に表示された時だけ行いたい場合に有用です。

例えば、データのフェッチなどは通常、コンポーネントがマウントされた時に一度だけ行います。

"use client";
import React, { useState, useEffect } from 'react';

function Example() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('/api/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []); // この行に注目

  return (
    <div>
      {data ? `Fetched data: ${data}` : 'Fetching data...'}
    </div>
  );
}

上記のコードでは、useEffect の第二引数として [] を指定しています。これは、コンポーネントがマウントされた時だけ /api/data からデータをフェッチすることを意味します。

まとめ

依存配列を使うことで、特定のステートやプロップスの変更時だけ副作用を実行することができます。これにより、不要な副作用の実行を防ぎ、パフォーマンスを向上させることが可能です。

備考

この記事はお試しで7割くらいGPT4によって書かれています