React useEffect フックで非同期関数を使用するとクリーンアップ警告がスローされるのはなぜですか?それを修正するにはどうすればよいですか?

useEffect 中の非同期関数に対する React フックの警告: クリーンアップ関数が必要です

React の useEffect フック内で非同期関数を使用すると、「useEffect 関数は次のことを行う必要がある」という警告が表示されることがあります。クリーンアップ関数を返すか、何も返しません。」この警告は、返された関数が適切にクリーンアップされていない場合にメモリ リークが発生する可能性があるためです。

React バージョン 18 未満 では、一般に useEffect 内で匿名関数を使用して、個別のクリーンアップ関数の必要性を回避できます。ただし、明確性や再利用性のために名前付き関数を使用したい場合は、次の 2 つのアプローチを利用できます。

1. 非同期関数を useEffect の外に移動する:

   useEffect の外側で非同期関数を定義し、それを直接呼び出します。このアプローチにより、useEffect 内のクリーンアップ関数の必要がなくなります。

2. useCallback および useEffect でコールバックを使用する:

   名前付きを使用する必要がある場合useEffect 内で関数を実行し、依存関係の変化を観察する場合は、useCallback を使用して関数をラップし、それを依存関係として useEffect に渡すことができます。これにより、依存関係が変更された場合に useEffect が再度実行され、前の関数呼び出しのクリーンアップがトリガーされます。

React バージョン 18 以降、Suspense の使用機能コンポーネント内のデータ取得には推奨されます。 Suspense を使用すると、データが利用可能になるまでフォールバック UI を提供しながら、非同期操作を処理できます。このアプローチにより、クリーンアップ関数と潜在的な競合状態の両方が不要になります。

Suspense を使用した簡略化された例を次に示します。

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

function App() {
  const [data, setData] = useState(null);

  const fetchData = async () => {
    const res = await fetch('api/data');
    const data = await res.json();
    setData(data);
  };

  return (
    <Suspense fallback={'Loading...'}>
      <div>{data ? JSON.stringify(data) : 'No data yet'}</div>
    </Suspense>
  );
}

以上がReact useEffect フックで非同期関数を使用するとクリーンアップ警告がスローされるのはなぜですか?それを修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。