useEffect()

副作用とは

エフェクトを使って同期を行う – React

React における「副作用」とは？ #reactnative - Qiita

React における副作用は例えば以下がある。

1. DOM の変更
2. API との通信
3. console.log
4. ファイルへの書き込み
5. state/props の変更
6. オブジェクトまたはその内部のプロパティへの代入
7. 配列の push()

useEffect() とは

エフェクトを使って同期を行う – React

【React】 useEffect()とは

ブラウザが描画を終えたあとに副作用を実行したいときに使う。

第二引数の配列は以下の意味がある。

useEffect()の第二引数に渡される依存配列によって、副作用関数の実行タイミングを制御することができます。

React が第二引数の依存配列の中身の値を比較して、副作用関数実行をスキップするかどうかを判断します。

useEffect()が 2 回呼ばれる

useEffect がマウント時に 2 回実行される #JavaScript - Qiita

main.tsxの<React.StrictMode>を消す。

第二引数を指定しない場合と[]を指定した場合

第二引数を指定しない場合、副作用はコンポーネントのすべてのレンダリング時に実行される。 第二引数に[]を指定した場合、副作用はコンポーネントの初回レンダリング時のみに実行され、以降のレンダリングでは実行されない。