React Hook useEffectの依存関係を理解してパフォーマンスを向上させる

2024-04-02

React Hook useEffect 使用時に依存関係の警告が欠落しているのを修正する方法

React Hook useEffect は、コンポーネントのレンダリング後に副作用を実行するのに役立ちます。しかし、useEffect 内で使用する変数がコンポーネントの外側で定義されている場合、useEffect の依存関係を明示的に指定する必要があります。依存関係が指定されていない場合、React は潜在的なパフォーマンスの問題やバグを検知し、開発者コンソールに警告を表示します。

警告の内容

Warning: React Hook useEffect has a missing dependency: 'data.title'. Either include it or remove the dependency array.

この警告は、useEffect 内で data.title という変数を使用しているにもかかわらず、依存関係の配列に data が含まれていないことを示しています。

解決策

この警告を修正するには、以下のいずれかの方法で依存関係を明示的に指定する必要があります。

依存関係の配列に data を追加する

useEffect(() => {
  // タイトルと説明を更新
  document.title = data.title.concat(HomeData().subTitle);
  // シンタックスハイライトを実行
  Prism.highlightAll();
}, [data]); // 依存関係に `data` を追加

useEffect 内で data を直接参照しない

const title = data.title;

useEffect(() => {
  // タイトルと説明を更新
  document.title = title.concat(HomeData().subTitle);
  // シンタックスハイライトを実行
  Prism.highlightAll();
}, []); // 依存関係は空のまま

eslint-disable-next-line を使用する

useEffect(() => {
  // タイトルと説明を更新
  document.title = data.title.concat(HomeData().subTitle);
  // シンタックスハイライトを実行
  Prism.highlightAll();
  // eslint-disable-next-line react-hooks/missing-dependency
}, []); // 警告を無視

注意事項

依存関係の配列に不要な変数を含めると、パフォーマンスの問題が発生する可能性があります。
eslint-disable-next-line を使用するのは、最後の手段としてのみ行うようにしてください。

補足

上記の例は、単純化のためにいくつかの省略を行っています。
実際のコードでは、状況に応じて適切な方法を選択する必要があります。

ファイル名: App.js

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

const App = () => {
  const [data, setData] = useState({
    title: 'React Hook useEffect サンプル',
    description: 'useEffect Hook の依存関係の警告を修正する方法'
  });

  useEffect(() => {
    // タイトルと説明を更新
    document.title = data.title.concat(HomeData().subTitle);
    // シンタックスハイライトを実行
    Prism.highlightAll();
  }, [data]); // 依存関係に `data` を追加

  const handleChange = (event) => {
    setData({
      ...data,
      title: event.target.value
    });
  };

  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.description}</p>
      <input type="text" value={data.title} onChange={handleChange} />
    </div>
  );
};

export default App;

解説

useState Hook を使用して、data という状態変数を定義しています。
useEffect Hook を使用して、data.title の変化に応じて以下の処理を実行しています。
- ドキュメントのタイトルを更新
- シンタックスハイライトを実行
useEffect Hook の依存関係の配列に data を追加することで、data が変化した時にのみ処理が実行されます。
handleChange 関数は、data.title の値を変更するイベントハンドラです。

実行方法

npm install コマンドを実行して、必要なライブラリをインストールします。
npm start コマンドを実行して、開発サーバーを起動します。
ブラウザで http://localhost:3000 を開き、サンプルコードを確認します。

useEffect Hook の依存関係を解決する他の方法

これは最も一般的な方法です。useEffect Hook の第二引数に、依存関係となる変数を配列として渡します。

useEffect(() => {
  // タイトルと説明を更新
  document.title = data.title.concat(HomeData().subTitle);
  // シンタックスハイライトを実行
  Prism.highlightAll();
}, [data]); // 依存関係に `data` を追加

useEffect 内で使用する変数を、useEffect の外側で定義して、直接参照しない方法もあります。

const title = data.title;

useEffect(() => {
  // タイトルと説明を更新
  document.title = title.concat(HomeData().subTitle);
  // シンタックスハイライトを実行
  Prism.highlightAll();
}, []); // 依存関係は空のまま

useRef Hook を使用して、data の値を保持することができます。

const ref = useRef(data.title);

useEffect(() => {
  // タイトルと説明を更新
  document.title = ref.current.concat(HomeData().subTitle);
  // シンタックスハイライトを実行
  Prism.highlightAll();

  // `data` が変化した時に `ref.current` を更新
  ref.current = data.title;
}, [data]); // 依存関係に `data` を追加

useMemo Hook を使用して、data.title を基に計算される値をキャッシュすることができます。

const title = useMemo(() => data.title.concat(HomeData().subTitle), [data]);

useEffect(() => {
  // タイトルと説明を更新
  document.title = title;
  // シンタックスハイライトを実行
  Prism.highlightAll();
}, [title]); // 依存関係に `title` を追加

callback 関数を使用する

useEffect Hook の第一引数に、callback 関数を渡す方法もあります。

useEffect(() => {
  const updateTitle = () => {
    // タイトルと説明を更新
    document.title = data.title.concat(HomeData().subTitle);
    // シンタックスハイライトを実行
    Prism.highlightAll();
  };

  // コンポーネントのマウント時と `data` の変化時に `updateTitle` 関数を実行
  updateTitle();

  return () => {
    // コンポーネントのアンマウント時に実行されるクリーンアップ関数
  };
}, [data]); // 依存関係に `data` を追加