React の useEffect フックの包括的なガイド: 機能コンポーネントの副作用の管理

React の useEffect フック

useEffect フックは、React で最も強力かつ不可欠なフックの 1 つです。これにより、機能コンポーネントで副作用を実行できるようになります。副作用には、データの取得、手動の DOM 操作、サブスクリプションの設定、コンポーネントのアンマウントまたは更新時のリソースのクリーンアップなどが含まれる可能性があります。

フックが導入される前は、副作用はクラスコンポーネントのcomponentDidMount、componentDidUpdate、componentWillUnmountなどのライフサイクルメソッドによって処理されていました。 useEffect は、これらすべてのライフサイクル メソッドを 1 つに統合し、機能コンポーネントでの副作用の処理を簡単にします。

---

useEffect とは何ですか?

useEffect フックは、React コンポーネントで副作用を実行するために使用されます。レンダリング後に実行され、特定の値が変更された場合にのみ実行されるように依存関係を使用して制御できます。

構文:

useEffect(() => {
  // Code for the side effect
  return () => {
    // Cleanup code (optional)
  };
}, [dependencies]);

• Effect Function: 最初の引数は、副作用が実行される関数です。
• クリーンアップ関数: エフェクトから関数を返すと、コンポーネントがアンマウントされるとき、またはエフェクトが再実行される前にその関数が実行されます (クリーンアップに役立ちます)。
• Dependency Array: 2 番目の引数は、依存関係のオプションの配列です。エフェクトは、この配列の値が変更された場合にのみ実行されます。

---

主要な概念:

1.レンダリングごとにエフェクトを実行する:

依存関係配列が指定されていない場合、エフェクトはコンポーネントのレンダリングのたびに実行されます。

import React, { useEffect } from 'react';

const Component = () => {
  useEffect(() => {
    console.log('Effect has run after every render');
  });

  return <div>Check the console</div>;
};

• 説明: この場合、コンポーネントが再レンダリングされるたびにエフェクトが実行されます。

2.エフェクトを 1 回実行する (マウント時):

空の依存関係配列 ([]) を渡すと、エフェクトは最初のレンダリング後に 1 回だけ実行されます (クラス コンポーネントのcomponentDidMount と同様)。

import React, { useEffect } from 'react';

const Component = () => {
  useEffect(() => {
    console.log('Effect runs only once, after the first render');
  }, []); // Empty dependency array

  return <div>Check the console</div>;
};

• 説明: ここで、エフェクトはコンポーネントのマウント時 (最初のレンダリング時) に 1 回だけ実行されます。

3.特定の依存関係に対するエフェクトの実行:

依存関係の配列 (例: [count]) を渡すと、その配列内の値が変更されるたびにエフェクトが実行されます。

useEffect(() => {
  // Code for the side effect
  return () => {
    // Cleanup code (optional)
  };
}, [dependencies]);

• 説明: カウント値が変化するたびにエフェクトが実行されます。ボタンをクリックするたびに、setCount が状態を更新し、再レンダリングをトリガーしてエフェクトを再実行します。

4.クリーンアップ関数:

エフェクトがクリーンアップが必要な副作用 (サブスクリプション、タイマーなど) を作成する場合、エフェクトからクリーンアップ関数を返すことができます。この関数は、エフェクトが再実行される前、またはコンポーネントがアンマウントされるときに実行されます。

import React, { useEffect } from 'react';

const Component = () => {
  useEffect(() => {
    console.log('Effect has run after every render');
  });

  return <div>Check the console</div>;
};

• 説明: useEffect フックはコンポーネントのマウント時にタイマーを設定し、コンポーネントのアンマウント時にクリーンアップ関数 (clearInterval) が呼び出され、メモリ リークを防ぎます。

5.条件付き効果:

依存関係配列を使用して、いつエフェクトを実行するかを制御できます。エフェクトは、配列内のいずれかの値が変更された場合にのみ実行されます。

import React, { useEffect } from 'react';

const Component = () => {
  useEffect(() => {
    console.log('Effect runs only once, after the first render');
  }, []); // Empty dependency array

  return <div>Check the console</div>;
};

• 説明: このコンポーネントには 2 つの useEffect フックがあります。 1 つはカウントが変更されたときに実行され、もう 1 つは名前が変更されたときに実行されます。

---

useEffect の一般的な使用例:

1. データの取得: useEffect は、コンポーネントのマウント時や特定の依存関係の変更時に API リクエストを行ったり、データを取得したりするためによく使用されます。

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

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

  useEffect(() => {
    console.log('Effect runs when count changes:', count);
  }, [count]); // Dependency on count

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

1. 外部イベントのサブスクライブ: たとえば、WebSocket のサブスクライブやイベント リスナーの追加など。

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

const TimerComponent = () => {
  const [time, setTime] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setTime((prevTime) => prevTime + 1);
    }, 1000);

    // Cleanup function to clear the timer
    return () => clearInterval(timer);
  }, []); // Empty dependency array to run once on mount

  return <div>Time: {time}</div>;
};

1. タイマーと間隔: タイマーと間隔を設定およびクリーンアップします。

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

const Component = () => {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('Alice');

  useEffect(() => {
    console.log(`Effect runs when 'count' changes: ${count}`);
  }, [count]); // Only runs when count changes

  useEffect(() => {
    console.log(`Effect runs when 'name' changes: ${name}`);
  }, [name]); // Only runs when name changes

  return (
    <div>
      <p>Count: {count}</p>
      <p>Name: {name}</p>
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <button onClick={() => setName(name === 'Alice' ? 'Bob' : 'Alice')}>Change Name</button>
    </div>
  );
};

---

使用効果の概要:

• useEffect は、機能コンポーネントで副作用を実行するために使用されます。
• 依存関係配列を渡すことで、いつエフェクトを実行するかを制御できます。
• 毎回のレンダリング後、マウント時に 1 回、または特定の値が変更されたときに実行できます。
• クリーンアップ関数を使用すると、コンポーネントがアンマウントされるとき、またはエフェクトが再度実行される前に、リソースをクリーンアップできます (タイマーのクリア、API リクエストのキャンセルなど)。
• 一般的な使用例には、データの取得、イベント リスナー、タイマーが含まれます。

---

結論

useEffect フックは、React で最も重要なフックの 1 つであり、宣言的な方法で副作用を処理できるようになります。複数のライフサイクル メソッドを 1 つに統合することでコードを簡素化し、コンポーネント内でいつどのようにエフェクトを実行するかについての柔軟性と制御が向上します。

---

以上がReact の useEffect フックの包括的なガイド: 機能コンポーネントの副作用の管理の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。