React で useEffect が 2 回実行されることに効果的に対処するにはどうすればよいですか?

Question

useEffect にカウンターと console.log() を用意して、状態のすべての変更を記録しますが、useEffect がマウント上で機能しません。 2回呼ばれました。 React18を使用しています。これが私のプロジェクトの CodeSandbox と以下のコードです: ああああ

Answer 1

更新: この投稿を見直して、もう少し賢くなって、このようなことはしないでください。

ref を使用するか、カスタム フック を使用せずに作成します。

リーリー

Answer 2

React 18 以降、development で StrictMode を使用する場合、マウント時に

useEffect が 2 回呼び出されるのが通常です。 Document:

には次のような内容が含まれています。

これは奇妙に思えるかもしれませんが、最終的には、HTTP リクエストをキャッシュし、2 つの呼び出しの間に問題が発生した場合にクリーンアップ関数を使用することで、バグがなく、現在のガイドラインに準拠し、将来のバージョンと互換性のある、より良い React コードを作成できます。以下に例を示します:

リーリー

この非常に詳細な 記事 では、React チームがこれまでにない方法で useEffect を説明し、例を示しています。

特定の使用例では、そのままにしておくことができます。心配する必要はありません。また、

useEffect の useRef ステートメントと if ステートメントでこれらのテクニックを使用して、ステートメントを 1 回だけ起動したり、StrictMode を削除したりすることは避けてください。 ドキュメント : でわかるように、 リーリー リーリー

それでも問題が解決しない場合は、

useEffect を使用している可能性があります。エフェクトではありません: アプリケーションの初期化 記事 全体を読むことをお勧めします。