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

React 18 での useEffect の二重呼び出しについて

React 18 で useEffect フックを StrictMode で使用すると、最初のマウント時にフックが 2 回呼び出されることに気づくかもしれません。これは、特にアプリケーションで予期しない動作が観察された場合に懸念を引き起こす可能性があります。

二重呼び出しの根拠

React ドキュメントによると、これは将来に備えるために React 18 で導入される意図された動作です。状態の保存と効率的な UI 更新を含む改善。 React は、コンポーネントをマウント時に再マウントすることで、コードが複数回マウントおよびアンマウントされる影響に対して確実に回復できるようにすることを目的としています。

開発と運用の動作

この動作は固有のものであることに注意することが重要です。 StrictMode を有効にして開発モードに移行します。プロダクション モードでは、呼び出しは 1 回だけ行われます。

エフェクトの 2 回呼び出しの解決

この動作に関する問題が発生した場合は、次のアプローチを検討してください。

1 。クリーンアップの処理:

コンポーネントがアンマウントされたときに必要な操作を実行するクリーンアップ関数が useEffect にあることを確認します。これにより、キャンセルされた HTTP リクエストやメモリ リークなどの問題が防止されます。

2.運用環境で StrictMode を回避する:

二重呼び出しによって重大な問題が発生する場合は、動作が開発モードに限定されるため、運用環境で StrictMode を無効にすることができます。

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

開発時に HTTP リクエストの重複を防ぐには、リクエストをキャッシュして重複を排除するライブラリを利用します。

useEffect のベスト プラクティス

この問題では必要な場合があります。注意してください。useEffect の使用法を再検討し、最適なものを採用する機会としても機能します。実践方法:

• useEffect を使用して変更をリッスンし、副作用を実行します。
• useEffect 内での状態の初期化を避けます。
• アンマウント時にリソースをクリーンアップするにはクリーンアップ関数を使用します。 .

2 回の useEffect 呼び出しは、コード内の潜在的なバグを発見することを目的としていることに注意してください。これにより、堅牢で本番環境に対応した React アプリケーションを作成できるようになります。

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