React 18 で useEffect フックが 2 回実行されるのはなぜですか (および修正方法)?

useEffect が 2 回実行される理由と React での処理方法

問題:

useEffect を使用して状態の変更をログに記録する場合マウント時に、効果が 2 回トリガーされることが観察されます。この問題は React 18 で発生します。

理由:

StrictMode を使用した React 18 の開発モードでは、重要なコンポーネントが複数のコンポーネントに対して復元できるようにするために、useEffect が意図的に 1 回再マウントされます。マウントとアンマウントのサイクル。 React は、パフォーマンスを向上させるために、これらのサイクル中に状態を保持することを目的としています。

解決策:

useEffect の最初の実行に依存する代わりに、空の依存関係を使用することをお勧めします。最初のレンダリング後にのみエフェクトを実行する配列 ([]):

import { useState, useEffect } from "react";

const Counter = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log("rendered", count);
  }, []);

  return <div>...</div>;
};

代替解決策:

状態への依存関係が不可欠であり、レンダリングごとにチェックする必要がある場合は、次のアプローチの使用を検討してください:

• クリーンアップ関数: useEffect から返されるクリーンアップ関数を使用して、コンポーネントのアンマウント時に副作用を実行します。これにより、適切なクリーンアップが保証され、メモリ リークが回避されます。
• useRef: useRef フックは、可変データへの参照を保存するために使用でき、その値はレンダリング間で保持されます。これは、複数の useEffect 呼び出しをトリガーせずに状態変化を追跡するのに役立ちます。
• キャッシュとデバウンス: 効果に外部リクエストの実行が含まれる場合は、重複呼び出しを防ぐためにキャッシュまたはデバウンス技術の使用を検討してください。

制作動作:

この動作は開発モードでのみ発生することに注意することが重要です。運用ビルドでは、useEffect はコンポーネントのマウントごとに 1 回だけ実行されます。

結論:

React 18 で useEffect が 2 回実行される理由を理解することは、行儀が良く堅牢なコードを作成するために重要です。反応コード。上記で説明した適切なソリューションを採用することで、開発者はバグを防止し、状態の一貫性を維持し、効率的なアプリケーションのパフォーマンスを確保できます。

以上がReact 18 で useEffect フックが 2 回実行されるのはなぜですか (および修正方法)?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。