React 18 の StrictMode で useEffect が 2 回実行されるのはなぜですか? どうすれば修正できますか?

useEffect を 2 回実行する: React で効果的に処理する

StrictMode の開発モードの場合、React 18 のマウント時に useEffect が 2 回呼び出されるのはなぜですか有効ですか?

理由

React 18 では、StrictMode が有効になっているため、最初のレンダリング中にコンポーネントを再マウントして、パフォーマンスを向上させ、バグ検出を支援します。この再マウントにより、コンポーネントはマウントとマウント解除の両方を複数回正常に処理できるようになります。

エフェクトが複数回実行される: 問題ですか?

複数のマウントにもかかわらず、ほとんどのエフェクトは正しく機能します。そしてアンマウントします。ただし、サブスクリプションの適切なクリーンアップを怠ったり、単一のマウント/アンマウントのライフサイクルを想定したりすると、特定のエフェクトで問題が発生する可能性があります。

複数の呼び出しに問題がある典型的なシナリオ

共通複数のエフェクト呼び出しが問題を引き起こす可能性がある状況には、次のものが含まれます:

• HTTPリクエスト: サーバー リクエストを行うエフェクトは、冗長なリクエストを送信し、予期しない動作を引き起こす可能性があります。
• 間隔ベースのエフェクト: 間隔の設定を伴うエフェクトは、コンポーネントがアンマウントされた後も実行され続ける可能性があります。メモリ リークや予期しない結果を引き起こします。

複数を処理するためのソリューションCalls

React では、StrictMode を禁止したり、複雑な回避策を使用したりするのではなく、複数の呼び出しを適切に処理する堅牢な効果を実装することを開発者に推奨しています。これには、エフェクトのセットアップ アクションを無効にするクリーンアップ関数の実装が含まれます。

クリーンアップ関数

クリーンアップ関数の一般的な例:

• エフェクトの停止または取り消し
• コンポーネント後に副作用が持続するのを防ぐunmount.
• リクエストの中止、間隔のクリア、またはエフェクトによって作成されたサブスクリプションのキャンセルを行います。

例: 複数の HTTP リクエストの処理

以下は、複数の HTTP リクエストを処理する例です。 useEffect:

useEffect(() => {
  const abortController = new AbortController();

  const fetchUser = async () => {
    try {
      const res = await fetch("/api/user/", {
        signal: abortController.signal,
      });
      // Process the response data
    } catch (error) {
      if (error.name !== "AbortError") {
        // Handle non-aborted errors
      }
    }
  };

  fetchUser();

  return () => abortController.abort();
}, []);

堅牢なエフェクトの利点

複数の呼び出しを効果的に処理する堅牢なエフェクト:

• パフォーマンスを強化し、メモリ リークを防止します.
• 再マウント時に開発モードでもバグのない動作を保証します。
• React 開発ガイドラインと将来のバージョンとの互換性と一致します。
• コードの信頼性と保守性が向上します。

以上がReact 18 の StrictMode で useEffect が 2 回実行されるのはなぜですか? どうすれば修正できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。