ここでは、組み込みのReact hookであるuseEffectの概要と、用途に応じた書き方を紹介します。
目次
Contents
useEffectとは？
React hooksを基礎から理解する (useEffect編) – Qiita
useEffectとは、「関数の実行タイミングをReactのレンダリング後まで遅らせるhook」です。副作用の処理（DOMの書き換え、変数代入、API通信などUI構築以外の処理）を関数コンポーネントで扱えます。
また後述しますが、レンダリング後だけでなく、コンポーネントをDOMから削除して破棄する（アンマウントする）際に実行するように書くこともできます。ここでいう「副作用」のイメージがやや掴みづらいのですが、私は「レンダリング（アンマウント）後にやりたい何らかの処理なんだな〜」とふんわり理解しています。
書き方あれこれ
レンダリング毎に実行する
useEffectに第一引数だけを渡すと、コンポーネントがレンダリングされる度に実行されます。
useEffect(() => { console.log("レンダリング毎に実行されるよ");});依存する値の更新時だけ実行する
useEffectの第２引数には、配列の形で副作用が依存している値を渡せます。ここを指定することで、その値（のどれか）が更新された時だけ実行するような挙動になります。
useEffect(() => { console.log("依存値の更新時に実行されるよ");}, [hoge, fuga]);最初のレンダリング後１度だけ実行する
依存値を表す第２引数に空の配列を指定すると、コンポーネントがレンダリングされた後に１度だけ実行されます。
useEffect(() => { console.log("レンダリング後に１度だけ実行されるよ");}, []);アンマウント後に実行する
コンポーネントがアンマウント、あるいは再実行されたときに実行（クリーンアップ）することもできます。
以下のように、useEffectの副作用内で関数を返すことで実現します。
useEffect(() => { return () => { console.log("クリーンアップの実行だよ"); }});
