Reactの副作用について

Reactの副作用hook

副作用hookについて。その意味を長年勘違いしていたのでまとめる。

副作用hookとは、reactでみんなが使う以下のものたち。

useEffect, useCallback, useRef, etc...

勘違いしていたこと

useEffect(() => {
  setFruits(apple)
}, [ apple ])

依存配列に入れた値が変わるたびに、処理を実行してくれるもの。

ではない。❌

正解は、レンダリングが起こった際に、依存配列に入れた値が変わっていたら処理を実行する。

---

まとめ

依存配列に入れた値を変更したのに処理が実行されない！！

なんてことが起こった経験があるかもしれない。

そういう時は、値の変更ではなく、再レンダリングされていないことに影響がある可能性が高い。

なので、値が変更されたら再レンダリングするようなロジックでなければ正しく動かない。

特にミュータブルな値を依存配列に入れる時は注意が必要。

---

一年くらいreactと触れ合ってきたのにそんなことも知らなかったなんて。恥ずかしい🫣

これからuseEffectやuseCallbackを使う時はその辺を意識する。