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>を消す。

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

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