React 18 開発モードでコンポーネントのマウント時に useEffect フックが 2 回トリガーされるのはなぜですか?

コンポーネントのマウント時に useEffect が 2 回トリガーされる

問題:

状態のみを含む依存関係配列で useEffect を使用すると、 React 18 開発では、エフェクト関数が最初のマウント時に 2 回呼び出されますmode.

説明:

React 18 では、同じ状態のコンポーネントの再マウントをサポートする機能が導入されました。これにより、すぐに使用できるパフォーマンスが向上しますが、コンポーネントの処理が必要になります。エフェクトのマウントと破棄が複数回行われます。

潜在的な問題を表面化するために、React は開発モード中にすべてのコンポーネントを 1 回自動的にアンマウントし、再マウントします。この再マウントにより、useEffect 関数が 2 回目にトリガーされます。

解決策:

この動作は、エフェクト ロジックの既存のバグを明らかにすることを目的として設計されています。正しいアプローチは、複数のマウントを正しく処理できるようにエフェクトの実装を調整することです。

推奨事項:

1.クリーンアップ関数の使用:

コンポーネントのアンマウント時にエフェクトのアクションを停止または元に戻す useEffect クリーンアップ関数を実装します。これにより、コンポーネントの状態と副作用に対するエフェクトの影響が運用モードと開発モードの間で一貫していることが保証されます。

2. HTTP リクエストのキャッシュ:

HTTP リクエストを重複排除してキャッシュする技術を採用して、パフォーマンスを最適化し、冗長なネットワーク操作を回避します。キャッシュ メカニズムを実装するデータ フェッチ ライブラリまたはフックの使用を検討してください。

3. useEffect の使用法を確認します:

useEffect が適切に使用されており、アプリケーション状態の初期化や再マウント時に繰り返してはいけないアクションの実行に使用されていないことを確認します。ガイダンスとして「効果ではない」原則を参照してください:

• 効果ではありません: アプリケーションの初期化
• 効果ではありません: 製品の購入

追加の考慮事項:

• これこの動作は開発モードでのみ発生します。運用環境では、useEffect は 1 回だけ呼び出されます。
• useEffect の useRef と if ステートメントを使用して再マウント動作を回避しようとしたり、StrictMode を削除したりすることはお勧めできません。
• useEffect に関する詳細な React ドキュメントを読むと、トピックに関するさらなる洞察を提供します。

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