useEffect
Componentを外部システムと同期させるためのhooks ref
「useEffect」という名前が悪い
ReactにおけるEffectとは、(eventによってではなく)renderによって引き起こされる副作用のこと ref
useEffect周りのdocs
docsに倣って以下の様に呼ぶ
tsuseEffect(() => {
// setup code
return () => {
// cleanup code
};
}, [...]);useEffectのライフサイクル
「同期の開始」と「同期の終了」の2つしかない
同期の開始時に、
setup code を実行する同期の終了時に、
cleanup code を実行するComponentのライフサイクル視点で見る
setup code は毎回のrendering後に実行されるただし、第2引数(deps)の指定の仕方によって実行をスキップできる
useEffectのdepsを指定した場合
rendering後にその値が前回から変化していたら実行される
renderingがトリガーなのであって、useEffect自体にはトリガーの機能はない
「
[..] の値が変更されたら実行」ではないことに注意配列の中に複数設定した場合、どれかが以前から変更されていれば実行される
空配列を指定した場合 ref
mount時とunmount時のみ発火する
cleanupに書いたものはunmount時
useEffectのdepsを何も指定しなかった場合 (
[] もなし)renderingされるたびに実行される
初回とか、stateが変更されたときとか
何も指定していないときと、
[] を指定したときは挙動が異なる意味ないのでこんな書き方はしない
Compoenntのライフサイクルと独立に考えたほうが理解しやすい
>コンポーネントの視点から見ると、エフェクトは、“レンダー直後” や “アンマウント直前” のように
>特定のタイミングで発生する “コールバック関数” や “ライフサイクル中のイベント” であると考えたくなります。
>しかし、このような考え方はすぐにややこしくなるため、避けた方が無難です。
> その代わりに、エフェクトの開始/終了という 1 サイクルのみにフォーカスしてください。
>コンポーネントがマウント中なのか、更新中なのか、はたまたアンマウント中なのかは問題ではありません。
>どのように同期を開始し、どのように同期を終了するのか、これを記述すれば良いのです。 ref
>#WIP
SSR時には実行されない
clientで、loadとhydrationが完了した後に実行される
初回は実行したくなければ以下のuseDidUpdateEffectを使うと良い ref
tsexport function useDidUpdateEffect(
fn: EffectCallback,
inputs?: DependencyList
) {
const didMountRef = useRef(false);
useEffect(() => {
if (didMountRef.current) fn();
else didMountRef.current = true;
}, inputs);
}dom更新の前に呼び出される
依存リストをカスタマイズしたい
fetch時にuseEffectを使う
参考
Dan氏の。長い。
React v17でclean up関数の実効タイミングが変わった
visual guide