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されるが、更新時には実行されないことになる。