useEffect フックは React の基本的な部分であり、機能コンポーネントで副作用を実行できるようにします。詳細な内訳は次のとおりです:

useEffectとは何ですか？

• useEffect フックを使用すると、データのフェッチ、サブスクリプション、DOM の手動変更などの副作用をコンポーネントで実行できます。
• これは、ライフサイクル メソッド、componentDidMount、componentDidUpdate、componentWillUnmount の組み合わせと考えることができます。

構文

useEffect(() => {
  // Your side effect code here

  return () => {
    // Cleanup code (optional)
  };
}, [dependencies]);

パラメータ

1. 効果関数: 最初の引数は副作用コードを含む関数です。この関数は、レンダリングが画面にコミットされた後に実行されます。

2. クリーンアップ関数 (オプション): エフェクト関数は、コンポーネントがアンマウントされるとき、またはエフェクトが再度実行される前に React が呼び出すクリーンアップ関数を返すことができます。これは、サブスクリプションやタイマーをクリーンアップするのに役立ちます。

3. Dependency Array: 2 番目の引数は依存関係の配列です。この効果は、依存関係の 1 つが変更された場合にのみ実行されます。空の配列 ([]) を渡すと、エフェクトは最初のレンダリング後に 1 回だけ実行されます (componentDidMount など)。

使用例

1. 基本的な例: マウント時のデータの取得

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

const DataFetchingComponent = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data))
      .catch(error => console.error('Error fetching data:', error));
  }, []); // Runs only once after the initial render

  return 
{data ? JSON.stringify(data) : 'Loading...'}
;
};

1. クリーンアップの例: イベントのサブスクライブ

import React, { useEffect } from 'react';

const EventListenerComponent = () => {
  useEffect(() => {
    const handleResize = () => {
      console.log('Window resized:', window.innerWidth);
    };

    window.addEventListener('resize', handleResize);

    // Cleanup function to remove the event listener
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []); // Runs only once after the initial render

  return 
Resize the window and check the console.
;
};

1. 依存関係の例: プロップの変更に基づいてエフェクトを実行する

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

const TimerComponent = ({ delay }) => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setCount(prevCount => prevCount   1);
    }, delay);

    // Cleanup function to clear the timer
    return () => clearInterval(timer);
  }, [delay]); // Runs every time `delay` changes

  return 
Count: {count}
;
};

ベストプラクティス

• 依存関係の指定: 古いクロージャを避けるために、エフェクトが依存する変数を依存関係の配列に常に含めます。
• レンダリング時の副作用を避ける: レンダリング段階での副作用を防ぎます。代わりに useEffect を使用してください。
• クリーンアップ関数を使用する: エフェクトでサブスクリプションまたはタイマーを作成する場合は、メモリ リークを避けるために常にクリーンアップ関数を返します。

結論

useEffect フックは、機能コンポーネントの副作用を処理するための強力なツールであり、最新の React 開発には不可欠です。その構文とベスト プラクティスを理解することで、コンポーネントの動作と副作用を効果的に管理できます。