Navigation

📁 JavaScript

React Hooks useEffect の正しい使い方と依存配列

📅 7月 8, 2025
👤
⏱ 1 min read

概要

React Hooksの`useEffect`は、コンポーネント内で副作用を扱うための重要なフックの一つです。正しい使い方と依存配列を設定することで、コンポーネントのパフォーマンスや動作を最適化することができます。

サンプルコード


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

const MyComponent = () => {
  const [data, setData] = useState('');

  useEffect(() => {
    fetchData();
  }, []); // 空の依存配列を指定

  const fetchData = async () => {
    const response = await fetch('https://api.example.com/data');
    const result = await response.json();
    setData(result);
  };

  return (
    <div>
      <p>{data}</p>
    </div>
  );
};

解説

上記のサンプルコードでは、`useEffect`を使用してコンポーネントがマウントされた時に`fetchData`関数を呼び出しています。依存配列に空の配列`[]`を指定することで、初回レンダリング時のみ`fetchData`関数が実行され、再レンダリング時にはスキップされます。

正しい依存配列の設定は、不必要な再レンダリングを避けるために重要です。依存配列に含まれる変数が変化した場合にのみ`useEffect`内の処理が実行されるため、効率的なコンポーネントの更新が可能となります。

応用例・バリエーション


useEffect(() => {
  window.addEventListener('resize', handleResize);
  return () => {
    window.removeEventListener('resize', handleResize);
  };
}, []); // イベントリスナーの追加と削除

useEffect(() => {
  fetchData();
}, [url]); // URLが変化した時のみデータを取得

ベストプラクティス

  • 依存配列を正確に設定する
  • 非同期処理やイベントリスナーの管理に注意する
  • `useEffect`内での状態の更新について検討する

関連技衎・参考情報

  • [React Hooks 公式ドキュメント](https://ja.reactjs.org/docs/hooks-effect.html)
  • [React Hooks FAQ](https://ja.reactjs.org/docs/hooks-faq.html)
  • [useEffect フックを使ってデータ取得やイベント処理を行う](https://ja.reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects)
  • [React Hooks Recipes](https://reactjs.org/docs/hooks-recipes.html)

“`

← Back to JavaScript