副作用とは

ネットワークを介したデータの取得やそのリアクティブな購読、ログの記録、リアルDOM の手動での書き換え

つまり、コンポーネントの状態を変化させ、それ以降の出力を変えてしまう処理のこと

useEffectについて

const SampleComponent: VFC = () => {
	const [data, setData] = useState(null);
	︙
	useEffect(() => {
		doSomething();
		
		return () => clearSomething();
	}, [someDeps]);
	︙
};

• 第1 引数として、引数を持たない関数を受け取る
  • この関数の中身が任意のタイミングで実行される
• useEffect へ第1 引数として渡す関数がその戻り値として任意の関数を返すようにしておくと、そのコンポーネントがアンマウントされるときにその戻り値の関数を実行してくれる
• 第2引数は、この配列の中に格納された変数がひとつでも前のレンダリング時と比較して差分があったときだけ、第1 引数の関数が実行される
  • 第2引数のことを依存配列（dependencies array）ともいう
• 依存配列が渡されなかった場合、レンダリングごとに毎回第1 引数の関数が実行されることになる。
• 空配列[] を渡すと、初回のレンダリング時にのみ第1引数の関数が実行される

＊マウントとは

Reactコンポーネントに対応するインスタンスとDOMノードの作成と、それをDOMツリー（DOMコンテナ）への追加を行う処理。簡単にいえば、該当のReactコンポーネントを画面に表示するために最初に行われる処理のこと。

【React】マウントとレンダリングとその違い

Effect Hook とライフサイクルメソッドの相違点

1. 実行されるタイミング
2. props とstate の値の即時性
3. 凝集の単位