😀
React Hooksの10種類を理解する（Basic: useEffect）
React Hooksの10種類を理解する（Basic: useEffect）
useEffectの基本
- 「DOMの書き換え（mutation）」「データ購読（subscriptions）」「timer」「logging」などの副作用（side effects） においては、UIにまつわるバグや非整合性を引き起こす原因となる。そのため、関数component本体（React Render Phase）で描写することはできない。そのような場合に使用するのが
useEffectになる。 -
useEffectに渡された関数は、renderが画面に描写された後に動作する。 -
componentDidMountとcomponentDidUpdateの2つの機能を持ったhookである。
effectの初期化（cleanup）
useEffect(() => {
const subscription = props.source.subscribe();
return () => {
subscription.unsubscribe();
};
});
- 上記の例では、更新がされるたびに新しいsubscriptionが作成されることになる。
- 前回のeffectは、次回のeffectが実行される前にcleanupされる。
条件付きでuseEffectを実行
useEffect(
() => {
const subscription = props.source.subscribe();
return () => {
subscription.unsubscribe();
};
},
[props.source],
);
- 上記の例だと、
useEffectの第2引数として、[props.source]が設定されている。こうすることによって、props.sourceが更新されたときのみuseEffectを実行するようになる。 - 空配列（
[]）の場合、mount時にeffectが実行され、unmount時にcleanupされるが、更新時には実行されないことになる。
(2021.08.04追記) useEffectとuseLayoutEffectとの違い
callback関数の実行タイミングの違いによって使い分けをする。
useEffectは画面描写後の実行、useLayoutEffectは画面描写前の実行となる。
公式にも記載されているが、画面の更新がブロックするのを避けるため、標準の useEffect を優先して使うほうがよい。
Discussion