Supershipグループ Advent Calendar 2022の12日目の記事になります。
はじめに
今回は,ReactのuseEffectを
業務でよく使っているがどういう挙動をするか分からなくなる事が多いなと思い復習も兼ねて,
迷うケースをまとめてみました。
Reactにおける副作用とは
- Domの更新
- API通信
- state/propsの変更
- ファイルへの書き込み
- オブジェクトまたはその内部のプロパティへの代入
- 配列のpush
...etc
コンポーネントの外に影響を与える行為。
useEffect
副作用をいつ実行するか制御できるもの
迷いやすい副作用実行タイミングまとめ
ケース1【第2引数の配列に要素を渡した場合】
const [hoge, setHoge] = setState(0);
useEffect(() => {
console.log(hoge)
}, [hoge]);
hogeが出力されるタイミングは
- 初回render後
- 再render後にhogeが変化した場合
Unmount時には実行されない
ケース2【第2引数に空配列を渡した場合】
useEffect(() => {
console.log('hoge');
}, []);
hogeが出力されるタイミングは
- 初回render後のみ
例えばリアルタイム性が不要なGETのAPI通信等は、初回render後に一度だけ実行すれば良いので、第2引数に空配列を入れてあげて不要なAPI通信を減らしてあげます。
ケース3【第二引数に何も渡さない場合】
useEffect(() => {
console.log('hoge');
});
hogeが出力されるタイミングは
- 初回render後
- 再render後
全ての再render後に実行されるので見直しが必要なことが多い(余分な再描画が行われていることが多い為)
クリーンアップ
ケース4【第二引数の配列に要素を渡した場合】
useEffect(() => {
return () => {
console.log(hoge);
};
}, [hoge]);
hogeが出力されるタイミングは
- 再render後にhogeが変化していた場合
- Unmount時
初回render時には実行されない
ケース5【第2引数に空配列を渡した場合】
useEffect(() => {
return () => {
console.log('hoge');
};
}, []);
hogeが出力されるタイミングは
- Unmount時
ケース6【第2引数に何も渡さない場合】
useEffect(() => {
return () => {
console.log('hoge');
};
});
hogeが出力されるタイミングは
- 再render後
- Unmount時
振り返り
今まで学んだことを振り返り。
countが0→10になったときにコンソール画面に何が出るか考えてみよう
useEffect(() => {
console.log('副作用', count)
return () => {
console.log('クリーンアップ', count);
};
}, [count]);
答え
クリーンアップ 0
副作用 10
0→10になったタイミングで
一度クリーンアップが走り、その後再renderが走り副作用が実行される。
まとめ
プロダクトのフロントのパーフォーマンスを仕事
をしていく為に近々useMemoについてもまとめようと思っています。
最後に
Supershipではプロダクト開発やサービス開発に関わる人を絶賛募集しております。
ご興味がある方は以下リンクよりご確認ください。
是非ともよろしくお願いします。