React Hooksの備忘録 ～useEffect()～
ReactのReact Hooks
フロントエンド開発で学習したものを忘れないようにReact Hooksの備忘録として投稿。
- useEffect()
useEffect()の基本的な使い方
Reactの公式のHookのAPI Refereneceより
副作用を有する可能性のある命令型のコードを受け付けます。
Accepts a function that contains imperative, possibly effectful code.
デフォルトでは副作用関数はレンダーが終了した後に毎回動作しますが、特定の値が変化した時のみ動作させるようにすることもできます。
By default, effects run after every completed render, but you can choose to fire them only when certain values have changed.
もしも副作用とそのクリーンアップを 1 度だけ（マウント時とアンマウント時にのみ）実行したいという場合、空の配列 ([]) を第 2 引数として渡すことができます。
If you want to run an effect and clean it up only once (on mount and unmount), you can pass an empty array ([]) as a second argument.
とのこと。ここでいう副作用はDOMの変更や、APIの通信等があげられます。
初回レンダー時および、アンマウント時、特定の処理（値の変化）を行った場合に、副作用を実行させるHook。
import { useEffect } from 'react'
以下のように記述します。
useEffect(() => {/* */ return () => {}}, [])
{/* */ return () => {}}が副作用関数、そのうちreturn () => {}はアマウント時に実行されます。[]が特定の値が変化した時のみ動作させるための特定の値を配列にした物になります。
したがって、この場合だと空配列が指定されているため、初回レンダー時および、アンマウント時にしか実行することができません。
実際に行ってみます。今回はuseStateで定義したcountに変更があるとuseEffectがよばれ、count(Effect)が加算されるというものです。
useEffect(() => {
setCountEffect((currentCount) => currentCount+1)
},[count])
countおよびcountEffectの初期値は同じゼロですが、useEffectは初回レンダー時に実行されるのでcountEffectは1になっています。
AddやRESETを押すとcountが加算またリセットされることで、countが変更されたことになります。その変更を読み取ってuseEffectが実行され、、count(Effect)が加算されるという流れになります。
時間があればアマウント時のもかこうかなと
まとめ
useEffectの要件をまとめると以下のようになります。
- 副作用関数を初回レンダー時、アマウント時、特定の値が変更された際に実行する
- 第二引数に特定の値を設定
- アマウント時に実行したいもの副作用関数内に
return () => {}を記述 -
useEffect()の引数で初期値を設定可能
Discussion