Tasuke Hubのロゴ

ITを中心に困っている人を助けるメディア

分かりやすく解決策を提供することで、あなたの困ったをサポート。 全ての人々がスムーズに生活できる世界を目指します。

  1. ホーム
  2. React
  3. React依存配列の罠と解決策: useEffectとメモ化で無限レンダリングを防ぐ方法

React依存配列の罠と解決策: useEffectとメモ化で無限レンダリングを防ぐ方法

時計のアイコン12 May, 2025
記事のサムネイル

こんにちは！Reactを使っている開発者なら、依存配列に関する問題に一度は頭を悩ませたことがあるでしょう。特にuseEffectフックの依存配列は、使い方を誤ると無限レンダリングループやパフォーマンスの低下を引き起こす原因となります。この記事では、Reactにおける依存配列の罠と、それを解決するための実践的なアプローチを紹介します。

useEffect依存配列の基本と一般的な落とし穴

あわせて読みたい

useEffectは、Reactのコンポーネントで副作用を扱うための強力なフックです。その使い方は一見シンプルに見えますが、依存配列（dependency array）の扱いを間違えると思わぬバグに悩まされることになります。

useEffect(() => {
  // 副作用を行うコード
  console.log(`カウント: ${count}`);
  
  // クリーンアップ関数（オプション）
  return () => {
    // クリーンアップのコード
  };
}, [count]); // 依存配列

依存配列は、useEffectの第2引数として渡す配列で、この配列内の値が変更されたときにのみエフェクトが再実行されます。依存配列に関する一般的な落とし穴には以下のようなものがあります：

  1. 依存配列の欠落: 依存配列を指定しない場合、エフェクトは毎回のレンダリング後に実行されます。これは意図しない動作を引き起こす可能性があります。
// 毎回のレンダリング後に実行される
useEffect(() => {
  document.title = `カウント: ${count}`;
}); // 依存配列がない
  1. 空の依存配列: 空の配列 [] を渡すと、エフェクトはコンポーネントのマウント時に一度だけ実行され、アンマウント時にクリーンアップ関数が呼ばれます。これはプロップスや状態の変更に反応しないため、それらの最新の値を使用する場合は注意が必要です。
// マウント時に一度だけ実行される
useEffect(() => {
  document.title = `カウント: ${count}`;
}, []); // 空の依存配列
  1. 欠落した依存関係: エフェクト内で使用される値（変数、プロップス、状態など）を依存配列に含めないと、エフェクトは古い値を参照してしまいます。
// 警告: countが変更されても再実行されない
useEffect(() => {
  document.title = `カウント: ${count}`;
}, []); // countが依存配列にない
  1. 不要な依存関係: 逆に、エフェクトが依存しない値を依存配列に含めると、不要なエフェクトの再実行が発生し、パフォーマンスが低下する可能性があります。
// nameが変更されるたびに実行される
useEffect(() => {
  document.title = `カウント: ${count}`;
}, [count, name]); // nameは不要な依存関係

これらの落とし穴を避けるためには、エフェクト内で使用するすべての値（関数やオブジェクトを含む）を依存配列に含める必要がありますが、それがまた新たな問題を引き起こすことがあります。次のセクションでは、オブジェクトと関数の参照問題とその解決策について見ていきましょう。

"依存配列を適切に管理することは、Reactアプリケーションのパフォーマンスと信頼性を確保するための鍵となります。" — Dan Abramov（React開発チーム）

オブジェクトと関数の参照問題と解決策

Reactで依存配列を扱う際に最も厄介な問題の一つが、オブジェクトと関数の参照問題です。JavaScriptでは、オブジェクトや関数は参照値であり、内容が同じでも新しく作成されるたびに異なる参照を持ちます。これがuseEffectの依存配列で問題を引き起こす原因となります。

オブジェクト参照の問題

コンポーネントがレンダリングされるたびに、コンポーネント内で定義されたオブジェクトは新しく作成されます。

function UserProfile({ userId }) {
  // このオブジェクトは毎回のレンダリングで新しく作成される
  const userConfig = { id: userId, fetch: true };
  
  useEffect(() => {
    fetchUserData(userConfig);
  }, [userConfig]); // 問題: userConfigは毎回新しい参照になるため、毎回エフェクトが実行される
  
  // ...
}

このコードでは、userConfigオブジェクトが依存配列に含まれていますが、コンポーネントがレンダリングされるたびに新しいオブジェクトが作成されるため、依存配列の浅い比較では毎回変更があったと判断され、エフェクトが再実行されます。これは無限ループの原因になることがあります。

関数参照の問題

同様に、コンポーネント内で定義された関数も毎回のレンダリングで新しく作成されます。

function SearchComponent({ query }) {
  // この関数は毎回のレンダリングで新しく作成される
  const fetchResults = () => {
    api.search(query);
  };
  
  useEffect(() => {
    fetchResults();
  }, [fetchResults]); // 問題: fetchResultsは毎回新しい参照になるため、毎回エフェクトが実行される
  
  // ...
}

解決策1: useMemoとuseCallbackの使用

これらの問題を解決するための一つの方法は、useMemoとuseCallbackフックを使用して、オブジェクトと関数をメモ化することです。

オブジェクトのメモ化:

function UserProfile({ userId }) {
  // userConfigをメモ化して参照の安定性を確保
  const userConfig = useMemo(() => {
    return { id: userId, fetch: true };
  }, [userId]); // userIdが変更されたときだけ新しいオブジェクトを作成
  
  useEffect(() => {
    fetchUserData(userConfig);
  }, [userConfig]); // これで安全に依存できる
  
  // ...
}

関数のメモ化:

function SearchComponent({ query }) {
  // fetchResults関数をメモ化して参照の安定性を確保
  const fetchResults = useCallback(() => {
    api.search(query);
  }, [query]); // queryが変更されたときだけ新しい関数を作成
  
  useEffect(() => {
    fetchResults();
  }, [fetchResults]); // これで安全に依存できる
  
  // ...
}

解決策2: 依存配列からオブジェクト・関数を除外し、プリミティブ値のみを依存させる

もう一つの解決策は、オブジェクト全体ではなく、その中のプリミティブ値（文字列、数値、真偽値など）だけを依存配列に含める方法です。

function UserProfile({ userId }) {
  const userConfig = { id: userId, fetch: true };
  
  useEffect(() => {
    fetchUserData(userConfig);
  }, [userId]); // userConfigではなくuserIdに依存させる
  
  // ...
}

関数も同様に、その関数が依存する値を直接依存配列に含めることができます。

function SearchComponent({ query }) {
  const fetchResults = () => {
    api.search(query);
  };
  
  useEffect(() => {
    fetchResults();
  }, [query]); // fetchResultsではなくqueryに依存させる
  
  // ...
}

これらのアプローチにより、参照の変更による不要なエフェクトの再実行を防ぎ、コンポーネントのパフォーマンスを向上させることができます。次のセクションでは、useMemoとuseCallbackによるメモ化の詳細と正しい使い方について掘り下げていきます。

useMemoとuseCallbackによるメモ化の正しい使い方

前のセクションでは、オブジェクトや関数の参照問題を解決するためにuseMemoとuseCallbackが役立つことを紹介しました。ここでは、これらのフックの正しい使い方と、実際のユースケースについて詳しく説明します。

useMemoとは

useMemoは、計算コストの高い処理の結果をメモ化（キャッシュ）するためのフックです。依存配列の値が変更されない限り、前回の計算結果が再利用されます。

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

useCallbackとは

useCallbackは、コールバック関数をメモ化するためのフックです。依存配列の値が変更されない限り、同じ関数参照が保持されます。

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

useMemoの適切な使用ケース

  1. 計算コストの高い処理: 大きな配列のフィルタリングや変換など、実行に時間がかかる処理の結果をメモ化するのに適しています。
function ProductList({ products, category }) {
  // 製品のフィルタリングをメモ化
  const filteredProducts = useMemo(() => {
    console.log('Filtering products...'); // 重い処理のログ
    return products.filter(product => product.category === category);
  }, [products, category]);
  
  return (
    <ul>
      {filteredProducts.map(product => (
        <li key={product.id}>{product.name}</li>
      ))}
    </ul>
  );
}
  1. 子コンポーネントへのプロップスとして渡すオブジェクト: 特にメモ化された子コンポーネントに渡すオブジェクトをメモ化することで、不要な再レンダリングを防止できます。
function ParentComponent({ userId }) {
  // userConfigをメモ化してMemoizedChildへの不要な再レンダリングを防止
  const userConfig = useMemo(() => ({
    id: userId,
    settings: { theme: 'dark', notifications: true }
  }), [userId]);
  
  return <MemoizedChild config={userConfig} />;
}

// React.memoでメモ化された子コンポーネント
const MemoizedChild = React.memo(function Child({ config }) {
  // configの参照が変わらなければ再レンダリングされない
  return <div>{config.id}</div>;
});

useCallbackの適切な使用ケース

  1. 子コンポーネントへのプロップスとして渡す関数: 特にメモ化された子コンポーネントに渡すコールバック関数をメモ化することで、不要な再レンダリングを防止できます。
function ParentComponent({ userId }) {
  const [count, setCount] = useState(0);
  
  // handleClickをメモ化してMemoizedButtonへの不要な再レンダリングを防止
  const handleClick = useCallback(() => {
    console.log(`Clicked by user ${userId}`);
    setCount(c => c + 1);
  }, [userId]); // countは関数内で直接使用せず、関数型更新を使用しているので依存に含めない
  
  return (
    <>
      <div>Count: {count}</div>
      <MemoizedButton onClick={handleClick} label="Increment" />
    </>
  );
}

// React.memoでメモ化された子コンポーネント
const MemoizedButton = React.memo(function Button({ onClick, label }) {
  console.log('Button rendered');
  return <button onClick={onClick}>{label}</button>;
});
  1. 依存配列に含める関数: useEffectなどの依存配列に含める関数をメモ化することで、エフェクトの不要な再実行を防止できます。
function DataFetcher({ query }) {
  // fetchDataをメモ化してuseEffectの不要な再実行を防止
  const fetchData = useCallback(() => {
    return api.fetch(query);
  }, [query]);
  
  useEffect(() => {
    const data = fetchData();
    // データを処理...
  }, [fetchData]); // fetchDataがメモ化されているので、queryが変わったときだけ再実行される
  
  // ...
}

メモ化の注意点

メモ化は強力な最適化ツールですが、使いすぎると逆効果になることもあります。以下の点に注意しましょう：

  1. すべてをメモ化しない: シンプルな計算や単純なオブジェクトの作成のためにメモ化を使うと、メモ化自体のオーバーヘッドが元の計算よりも大きくなる場合があります。

  2. 依存配列を正しく設定する: useMemoやuseCallbackの依存配列には、メモ化する値や関数が使用するすべての値を含める必要があります。含め忘れるとバグの原因になります。

  3. 早すぎる最適化を避ける: パフォーマンスの問題が実際に発生するまで、メモ化を適用しないようにしましょう。Reactはすでに非常に最適化されており、多くの場合、追加の最適化は必要ありません。

"最も強力な原則の一つは、測定せずに最適化しないということです。" — カーニハン＆プラウガー

メモ化を適切に使用することで、Reactアプリケーションのパフォーマンスを大幅に向上させることができます。次のセクションでは、無限レンダリングループを防ぐ具体的なパターンについて見ていきましょう。

無限レンダリングループを防ぐパターン

Reactアプリケーション開発で最も厄介な問題の一つが無限レンダリングループです。これはコンポーネントが無限に再レンダリングされる状態で、ブラウザがフリーズしたり、アプリケーションが応答しなくなったりする原因となります。ここでは、無限レンダリングループが発生する一般的なケースとその防止パターンを紹介します。

無限ループの主な原因

  1. 依存配列内の値が毎回変わる: useEffectの依存配列に含まれる値が毎回のレンダリングで変わると、エフェクトが無限に再実行されます。

  2. レンダリング中の状態更新: エフェクト内で状態を更新し、その状態が依存配列に含まれている場合、無限ループが発生します。

  3. プロップス・状態の更新によるオブジェクト・関数の再作成: 前述の通り、オブジェクトや関数は毎回のレンダリングで新しく作成され、依存配列に含めると無限ループの原因になります。

パターン1: 依存配列を正しく設定する

無限ループを防ぐ最も基本的な方法は、依存配列を正しく設定することです。

// 問題のあるコード（無限ループが発生する）
function Counter() {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    // 毎回エフェクトが実行され、状態が更新され、再レンダリングされる...
    setCount(count + 1);
  }, [count]); // countが変わるたびに実行される
  
  return <div>{count}</div>;
}

// 修正後のコード
function Counter() {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    // 初回レンダリング時のみ実行される
    setCount(c => c + 1);
  }, []); // 空の依存配列
  
  return <div>{count}</div>;
}

パターン2: 状態更新の条件付け

状態を更新する際に条件を設けることで、無限ループを防止できます。

function AutoSave({ data }) {
  const [isSaving, setIsSaving] = useState(false);
  
  useEffect(() => {
    // データが変更されたときのみ保存
    if (!isSaving) {
      setIsSaving(true);
      
      saveData(data).finally(() => {
        setIsSaving(false);
      });
    }
  }, [data, isSaving]); // dataとisSavingに依存
  
  return <div>{isSaving ? '保存中...' : '保存済み'}</div>;
}

パターン3: useRefを使用して値を保持する

useRefを使用すると、再レンダリング間で値を保持でき、依存配列に含める必要もありません。

function DataFetcher({ url }) {
  const [data, setData] = useState(null);
  const previousUrlRef = useRef(url);
  
  useEffect(() => {
    // urlが変更された場合のみデータをフェッチ
    if (previousUrlRef.current !== url) {
      fetchData(url).then(setData);
      previousUrlRef.current = url;
    }
  }, [url]); // urlに依存するが、条件付きで実行
  
  return <div>{data}</div>;
}

パターン4: useEffectEventを使用する（React 19+）

React 19では、useEffectEventという新しいフックが導入され、エフェクト内で使われる非リアクティブなロジックを分離できるようになりました。

// React 19の新機能
import { useEffect, useEffectEvent } from 'react';

function AnalyticsTracker({ route, user }) {
  // リアクティブでないロジックをuseEffectEventに分離
  const logRouteChange = useEffectEvent((route) => {
    // userは依存配列に含めなくてもアクセス可能
    analytics.logRouteChange(route, user.id);
  });
  
  useEffect(() => {
    // routeが変わるたびに実行されるが、userが変わっても再実行されない
    logRouteChange(route);
  }, [route]); // userは依存配列に含まれない
  
  return null;
}

パターン5: 状態更新のバッチ処理

複数の状態更新を一度にバッチ処理することで、不要な再レンダリングを減らすことができます。

function UserDashboard({ userId }) {
  const [user, setUser] = useState(null);
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    setLoading(true);
    
    // 並行してデータをフェッチ
    Promise.all([
      fetchUser(userId),
      fetchPosts(userId)
    ]).then(([userData, postsData]) => {
      // 状態更新をグループ化
      setUser(userData);
      setPosts(postsData);
      setLoading(false);
    });
  }, [userId]); // userIdにのみ依存
  
  if (loading) return <div>読み込み中...</div>;
  return (
    <div>
      <UserProfile user={user} />
      <PostList posts={posts} />
    </div>
  );
}

パターン6: デバッグツールを活用する

無限ループに悩まされている場合は、React Developer ToolsのProfilerタブを使用して、コンポーネントの再レンダリングの原因を特定することが役立ちます。また、コンソールログを使って、エフェクトがいつ実行されるかを確認することも有効です。

useEffect(() => {
  console.log('エフェクトが実行されました', { count, name });
  
  // エフェクトのコード...
  
}, [count, name]); // 依存関係をログに記録

無限レンダリングループは、発見が難しく、修正に時間がかかることがありますが、上記のパターンを理解し適用することで、多くの場合は防ぐことができます。次のセクションでは、依存配列に関するESLintのルールと、それにどう向き合うかについて見ていきましょう。

"プログラミングで最も難しいのは、バグが存在することを認めることではなく、バグがないと思っていたときに本当はあったと認めることだ。" — Tom DeMarco

依存配列のESLintルールと向き合う方法

Reactプロジェクトでは、ESLintのreact-hooks/exhaustive-depsルールが依存配列の問題を検出するのに役立ちます。このルールは、useEffectやuseMemo、useCallbackの依存配列に不足している依存関係がある場合に警告を表示します。ただ、このルールと向き合うのは時として難しいことがあります。ここでは、このルールの目的と、適切に対処する方法について説明します。

ESLintルールの目的

react-hooks/exhaustive-depsルールは、フックの依存配列に必要なすべての依存関係が含まれていることを確認するためのものです。エフェクト内で使用されるすべての値（変数、プロップス、状態など）は、依存配列に含める必要があるというのが基本的な考え方です。

例えば、以下のコードはESLintの警告を発生させます：

function ProfilePage({ userId }) {
  const [user, setUser] = useState(null);
  
  // ESLint警告: React Hook useEffect has a missing dependency: 'userId'. 
  // Either include it or remove the dependency array.
  useEffect(() => {
    fetchUser(userId).then(data => setUser(data));
  }, []); // userIdが依存配列にない
  
  // ...
}

警告への対処法

ESLintの警告に対処する方法はいくつかあります：

  1. 依存配列に不足している依存関係を追加する（推奨）：
useEffect(() => {
  fetchUser(userId).then(data => setUser(data));
}, [userId]); // userIdを依存配列に追加
  1. 依存関係を除去するようにコードを変更する：
// 初回レンダリング時にuserIdを保存
const initialUserIdRef = useRef(userId);

useEffect(() => {
  // 保存したuserIdを使用
  fetchUser(initialUserIdRef.current).then(data => setUser(data));
}, []); // 依存関係なし
  1. コメントでESLintルールを無効にする（最終手段）：
// eslint-disable-next-line react-hooks/exhaustive-deps
useEffect(() => {
  fetchUser(userId).then(data => setUser(data));
}, []); // ESLintルールを無効化

ESLintルールを無効にするとき

ESLintルールを無効にするのは、本当に必要な場合のみにすべきです。以下のようなケースでは、ルールを無効にする正当な理由があります：

  1. コンポーネントのマウント時のみ実行したい場合： 例えばイベントリスナーの登録やサブスクリプションの設定など、コンポーネントのマウント時にのみ実行し、クリーンアップはアンマウント時にのみ行いたい場合。
useEffect(() => {
  const handleResize = () => {
    // ウィンドウサイズの変更に応じた処理
  };
  
  window.addEventListener('resize', handleResize);
  
  return () => {
    window.removeEventListener('resize', handleResize);
  };
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []); // 空の依存配列でマウント時のみ実行
  1. カスタムフックの実装詳細を隠蔽したい場合： カスタムフックの内部実装は変更される可能性がありますが、APIは安定させたい場合。
function useCustomHook(stableInput) {
  const [state, setState] = useState(null);
  
  useEffect(() => {
    // 何らかの内部実装
    someInternalFunction();
    setState(computeState(stableInput));
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [stableInput]); // 内部関数に依存させない
  
  return state;
}

ベストプラクティス

ESLintルールと適切に向き合うためのベストプラクティスは以下の通りです：

  1. できるだけルールに従う: ESLintの警告は多くの場合、実際のバグや潜在的な問題を指摘しています。まずはルールに従って依存配列を修正することを検討しましょう。

  2. コードをリファクタリングして問題を解決する: 上記で紹介したテクニック（useMemo、useCallback、useRef、useEffectEventなど）を使って、コードを修正することで警告を解消できることが多いです。

  3. コメントで無効化する場合は理由を明記する: ESLintルールを無効にする場合は、なぜ無効にする必要があるのか、コメントで明記しましょう。

// マウント時のみイベントリスナーを設定し、アンマウント時にクリーンアップする
// eslint-disable-next-line react-hooks/exhaustive-deps
useEffect(() => {
  // ...
}, []);
  1. チームでルールを統一する: チーム全体でESLintルールの扱い方を統一することで、コードの一貫性と品質を保つことができます。

React Hooks ESLintプラグインは、Reactアプリケーションの品質を保つための強力なツールです。警告を無視するのではなく、理解して適切に対処することで、より堅牢で信頼性の高いコードを書くことができます。

"規則を破るには、まず規則を理解しなければならない。" — パブロ・ピカソ

実践的なケーススタディ: 依存配列の最適化

ここまで学んだ知識を実践的なケーススタディを通して応用してみましょう。以下の例では、よくある依存配列の問題とその最適化手法を紹介します。

ケース1: データフェッチングとキャッシュ

APIからデータをフェッチして表示するコンポーネントでは、依存配列の扱いが重要です。

// 最適化前のコード
function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  
  // 問題: fetchUserが再定義され、無限ループの可能性がある
  const fetchUser = async () => {
    try {
      const response = await api.getUser(userId);
      setUser(response.data);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };
  
  useEffect(() => {
    fetchUser();
  }, [fetchUser]); // fetchUserは毎回新しい関数になるため無限ループが発生
  
  if (loading) return <div>読み込み中...</div>;
  if (error) return <div>エラー: {error}</div>;
  
  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

最適化後のコード:

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  
  // useCallbackでfetchUser関数をメモ化
  const fetchUser = useCallback(async () => {
    try {
      const response = await api.getUser(userId);
      setUser(response.data);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  }, [userId]); // userIdが変わったときだけ関数を再作成
  
  useEffect(() => {
    fetchUser();
  }, [fetchUser]); // メモ化されたfetchUserに依存
  
  if (loading) return <div>読み込み中...</div>;
  if (error) return <div>エラー: {error}</div>;
  
  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

あるいは、より簡潔に:

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  
  useEffect(() => {
    // エフェクト内に直接非同期関数を定義
    const fetchUser = async () => {
      setLoading(true);
      try {
        const response = await api.getUser(userId);
        setUser(response.data);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };
    
    fetchUser();
  }, [userId]); // userIdにのみ依存
  
  if (loading) return <div>読み込み中...</div>;
  if (error) return <div>エラー: {error}</div>;
  
  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

ケース2: フォーム処理と検証

フォーム処理では、複数の状態と副作用がからみ合うことがあります。

// 最適化前のコード
function RegistrationForm() {
  const [formData, setFormData] = useState({ username: '', email: '', password: '' });
  const [errors, setErrors] = useState({});
  const [isValid, setIsValid] = useState(false);
  
  // フォームの検証
  const validateForm = () => {
    const newErrors = {};
    
    if (formData.username.length < 3) {
      newErrors.username = 'ユーザー名は3文字以上で入力してください';
    }
    
    if (!formData.email.includes('@')) {
      newErrors.email = '有効なメールアドレスを入力してください';
    }
    
    if (formData.password.length < 8) {
      newErrors.password = 'パスワードは8文字以上で入力してください';
    }
    
    setErrors(newErrors);
    setIsValid(Object.keys(newErrors).length === 0);
  };
  
  // 問題: validateFormは毎回新しい関数になり、formDataが変わるたびに再検証される
  useEffect(() => {
    validateForm();
  }, [validateForm]); // 無限ループの可能性
  
  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };
  
  const handleSubmit = (e) => {
    e.preventDefault();
    if (isValid) {
      // フォーム送信処理
    }
  };
  
  return (
    <form onSubmit={handleSubmit}>
      {/* フォームの内容 */}
    </form>
  );
}

最適化後のコード:

function RegistrationForm() {
  const [formData, setFormData] = useState({ username: '', email: '', password: '' });
  const [errors, setErrors] = useState({});
  const [isValid, setIsValid] = useState(false);
  
  // useCallbackでvalidateForm関数をメモ化
  const validateForm = useCallback(() => {
    const newErrors = {};
    
    if (formData.username.length < 3) {
      newErrors.username = 'ユーザー名は3文字以上で入力してください';
    }
    
    if (!formData.email.includes('@')) {
      newErrors.email = '有効なメールアドレスを入力してください';
    }
    
    if (formData.password.length < 8) {
      newErrors.password = 'パスワードは8文字以上で入力してください';
    }
    
    setErrors(newErrors);
    setIsValid(Object.keys(newErrors).length === 0);
  }, [formData]); // formDataが変わったときだけ関数を再作成
  
  // formDataが変わるたびに検証を実行
  useEffect(() => {
    validateForm();
  }, [validateForm]);
  
  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };
  
  const handleSubmit = (e) => {
    e.preventDefault();
    if (isValid) {
      // フォーム送信処理
    }
  };
  
  return (
    <form onSubmit={handleSubmit}>
      {/* フォームの内容 */}
    </form>
  );
}

ケース3: コンテキストを使用したテーマ切り替え

コンテキストを使用するコンポーネントでも、依存配列の最適化が重要です。

// テーマコンテキスト
const ThemeContext = React.createContext({
  theme: 'light',
  toggleTheme: () => {}
});

// テーマプロバイダー
function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');
  
  // 問題: toggleThemeは毎回新しい関数になる
  const toggleTheme = () => {
    setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light');
  };
  
  // コンテキスト値が毎回変わるため、消費者コンポーネントが不必要に再レンダリングされる
  const contextValue = { theme, toggleTheme };
  
  return (
    <ThemeContext.Provider value={contextValue}>
      {children}
    </ThemeContext.Provider>
  );
}

最適化後のコード:

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');
  
  // useCallbackでtoggleTheme関数をメモ化
  const toggleTheme = useCallback(() => {
    setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light');
  }, []); // 依存関係なし（関数型更新を使用）
  
  // useMemoでコンテキスト値をメモ化
  const contextValue = useMemo(() => {
    return { theme, toggleTheme };
  }, [theme, toggleTheme]); // themeまたはtoggleThemeが変わったときだけ再作成
  
  return (
    <ThemeContext.Provider value={contextValue}>
      {children}
    </ThemeContext.Provider>
  );
}

これらのケーススタディを通じて、依存配列の最適化がReactアプリケーションのパフォーマンスと信頼性にどのように貢献するかを理解できたと思います。

まとめ

Reactの依存配列は、コンポーネントの挙動とパフォーマンスに大きな影響を与えます。この記事では、依存配列に関する一般的な問題と、それを解決するための実践的なアプローチを紹介しました。

  • 依存配列の基本: useEffectなどのフックの依存配列は、エフェクトが再実行されるタイミングを制御します。
  • 参照問題の解決: オブジェクトや関数の参照問題は、useMemoとuseCallbackを使って解決できます。
  • メモ化の適切な使用: メモ化は強力な最適化ツールですが、使いすぎると逆効果になることがあります。
  • 無限ループの防止: 適切な依存配列の設定やuseRefの使用など、無限ループを防ぐためのパターンがあります。
  • ESLintルールとの向き合い方: ESLintの警告は、コードの問題を指摘する有益な情報です。理解して適切に対処しましょう。

依存配列を適切に管理することは、Reactアプリケーションの品質を向上させるための重要なスキルです。この記事で紹介した知識とテクニックを活用して、より堅牢で効率的なReactアプリケーションを構築してください。

"完璧を目指すことは、達成することではなく、そこに向かって進み続けることである。" — アリストテレス

おすすめ記事

TH

Tasuke Hub管理人

東証プライム市場上場企業エンジニア

情報系修士卒業後、大手IT企業にてフルスタックエンジニアとして活躍。 Webアプリケーション開発からクラウドインフラ構築まで幅広い技術に精通し、 複数のプロジェクトでリードエンジニアを担当。 技術ブログやオープンソースへの貢献を通じて、日本のIT技術コミュニティに積極的に関わっている。

🎓情報系修士🏢東証プライム上場企業💻フルスタックエンジニア📝技術ブログ執筆者

おすすめの書籍

Effective TypeScript 第2版 ―型システムの力を最大限に引き出す83項目

Effective TypeScript 第2版 ―型システムの力を最大限に引き出す83項目

オーム社

おすすめコンテンツ