非同期関数を使用すると、React `useEffect` フックがクリーンアップの欠落について警告するのはなぜですか?

React の useEffect 関数: 非同期関数とクリーンアップ関数を理解する

React で useEffect フックを使用すると、開発者は次のような警告が表示されることがあります。フック関数はクリーンアップ関数を返すか、何も返さない必要があります。この警告の原因を理解するために、非同期 useEffect 呼び出しにおけるクリーンアップ関数の役割を詳しく調べてみましょう。

useEffect の非同期関数

提供されたコード例では、 useEffect 関数は、useEffect 内で非同期関数 (async キーワードを使用) を使用します。 fetch などの非同期関数は Promise を返します。 useEffect で使用される場合、useEffect 関数の戻り値は通常、コンポーネントがアンマウントされるか依存関係配列が変更されるときに呼び出されるクリーンアップ関数です。

ただし、useEffect の非同期関数の場合、React はクリーンアップ機能。この動作が許可されるのは、コンポーネントがアンマウントされるか依存関係の配列が変更されると、React 自体が保留中の Promise をクリーンアップするためです。

警告が表示される理由

クリーンアップ関数がないにもかかわらず要件に従って、クリーンアップ関数を返さずに非同期関数が useEffect で使用されると、警告が発行されます。この警告は、React の将来のバージョンでの潜在的な問題を回避することを目的としたベスト プラクティスの推奨事項です。

解決策

React バージョン 17 未満の場合は、非同期ロジックを に移動することを検討してください。別の関数を作成し、useEffect 内から呼び出します。あるいは、componentDidMount やcomponentWillUnmount などのコンポーネントのライフサイクル メソッドを使用して、非同期タスクを処理します。

React バージョン 18 以降の場合は、非同期データの取得をより効率的に行うために、Suspense と SWR などのデータ取得ライブラリを組み合わせて使用​​することを検討してください。

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