React 18 開発モードで useEffect フックが 2 回トリガーされるのはなぜですか?

React 18 で useEffect が複数回トリガーされる: 原因と解決策

React 18 の開発環境では、useEffect フックが呼び出される場合があります。最初のコンポーネントの取り付け時に 2 回。この動作は、将来の UI 状態保持機能に対する React の準備に由来します。

二重呼び出しの理由:

React は、状態を保持しながらツリーを再マウントする必要があるシナリオを予期しています。シームレスなユーザーエクスペリエンスを実現します。たとえば、タブを切り替えてページに戻るとき、React は以前とまったく同じ画面を表示することを目指します。これを容易にするために、初期化中にコンポーネントをアンマウントして再マウントすることによってコンポーネントの回復力をテストします。

開発動作と運用動作:

この二重呼び出しは排他的に発生することに注意することが重要です。開発モードで。運用環境では、useEffect は期待どおりに動作し、マウントごとに 1 回だけ呼び出されます。

問題の処理:

2 回の呼び出しは珍しいように思えるかもしれませんが、これにはチャンスがあります。コードの品質を向上させ、将来の React バージョンに合わせて調整します。通常、useEffect は複数の呼び出しに耐性があり、メモリ リークを防ぐために適切にクリーンアップする必要があります。

例: useEffect 内の間隔:

内に間隔が設定されている例を考えてみましょう。エフェクトを使用します。厳密モードでの潜在的な問題を防ぐために、クリーンアップ関数は、コンポーネントがアンマウントされたら間隔を明確に終了する必要があります。

代替アプローチ (推奨されません):

いくつかuseEffect 内で useRef と条件ステートメントを使用して、実行を 1 回に制限することを提案する場合があります。ただし、React はそのような慣行を明示的に推奨せず、代わりにクリーンアップ関数を実装することの重要性を強調しています。

useEffect 内の API 呼び出し:

useEffect に API 呼び出しが含まれる場合は、fetch の使用を検討してください。 AbortControllerを使用して。コントローラーを使用すると、コンポーネントがアンマウントされたときに関連性がなくなったリクエストを中止できます。これにより、アンマウントされたコンポーネントの状態更新が防止され、パフォーマンスが向上します。

結論:

React 18 で useEffect が二重に呼び出される理由を理解し、適切な処理テクニックを採用することで、より堅牢でバグのないコードに変わります。開発モードでの一時的な性質に関係なく、コンポーネントの復元力を強化し、将来の React リリースでのシームレスな動作を保証する絶好の機会です。

以上がReact 18 開発モードで useEffect フックが 2 回トリガーされるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。