React で「useEffect 関数はクリーンアップ関数を返すか、何も返さなければなりません」という警告を回避するにはどうすればよいですか?

useEffect の非同期関数に対する React フックの警告: useEffect 関数はクリーンアップ関数を返すか何も返さなければなりません

React では、通常、useEffect フックは非同期操作を実行するために使用されます。データの取得やイベント リスナーの設定など。ただし、useEffect で非同期関数を使用する場合、「useEffect 関数はクリーンアップ関数を返すか、何も返さなければなりません」という一般的な警告が発生する可能性があります。この警告は、非同期関数が何も返さないため、クリーンアップが実行されていないことを示します。

問題の概要

次の例を考えてみましょう。

useEffect(async () => {
  try {
    const response = await fetch(`https://www.reddit.com/r/${subreddit}.json`);
    const json = await response.json();
    setPosts(json.data.children.map(it => it.data));
  } catch (e) {
    console.error(e);
  }
}, []);

ここでは、 useEffect フックは、非同期フェッチ操作を実行するために使用されます。ただし、この関数は何も返さず、useEffect フックの重要な React ルールに違反しています。

警告について

この警告が発生するのは、React では useEffect からクリーンアップ関数を返すことが推奨されているためです。非同期操作が実行された場合。このクリーンアップ関数は、useEffect フックがアンマウントされるときに呼び出され、サブスクリプションのキャンセルやイベント リスナーの削除などの適切なクリーンアップ アクションが可能になります。クリーンアップ関数を返さないと、潜在的な副作用が残り、パフォーマンスに影響を与える可能性があります。

重要なポイント

警告を回避するには、useEffect の async 関数がクリーンアップ関数を返すようにしてください。クリーンアップが必要ない場合は、空の関数を明示的に返します:

useEffect(async () => {
  try {
    const response = await fetch(`https://www.reddit.com/r/${subreddit}.json`);
    const json = await response.json();
    setPosts(json.data.children.map(it => it.data));
  } catch (e) {
    console.error(e);
  }
  return () => {} // Explicit empty cleanup function
}, []);

以上がReact で「useEffect 関数はクリーンアップ関数を返すか、何も返さなければなりません」という警告を回避するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。