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