useEffectのフック関数は初期化時、二回実行された原因は

React 18が登場された時、「厳格」と「非厳格」という二つのモードは追加されました。

厳格モード(String Mode)は開発環境(development)のみで役に立て、本番環境で役に立てないようにご注意くだい。

開発環境で、厳格モードを使ったら、useEffectのフック関数は二回実行されるようになります。なぜかというと、コンポーネントの即時アンインストールと再マウントを模倣するために二回実行されます。実行順位は次になります。

//コンポーネントのマウント
1.React mounts the component. 
//layoutの実行
2.Layout effects are created. 
 // Effectsの実行
3.Effect effects are created.
//コンポーネントのデストロイのシミュレーション
4.React simulates effects being destroyed on a mounted component. 
// layoutのデストロイ
5.Layout effects are destroyed. 
// Effectsのデストロイ
6.Effects are destroyed. 
// Reactの再マウントのシミュレーション
7.React simulates effects being re-created on a mounted component. 
// layoutの再作成
8.Layout effects are created 
// Effectの再実行
9.Effect setup code runs 

非厳格モードが使用エアれたら、ただ次のステップに従って実行されます。

//コンポーネントのマウント
1.React mounts the component. 
//layoutの実行
2.Layout effects are created. 
 // Effectsの実行
3.Effect effects are created.

実際の作業で、開発に便利なために、「Strict Mode」を削除または閉めたりするのは一般的です。