【react】reactのcomponentDidUpdate機能をおさらい

お題

reactのcomponentDidUpdate機能をおさらい

最近reactでhook昨日のuseeffectなるものの使い方を学びがてら現在のreactの

ライフサイクルのおさらいをしていました。

hookのuseeffectとは、componentDidmountとcomponentDidUpdateとcomponentWillmoutの

機能を一つにまとめたものらしくこの関数一つで三つの役割を持つことができて

ここで更新された値をごにょごにょする・管理がかなり楽になることのこと。

そこでふと「componentDidUpdateってどんな関数だっけ？」と思ったので復習がてら

使い方をググることに。

componentDidmountしかまともに使っていなかったのでどんな関数だっけと戸惑いながら

componentDidUpdateの使い方をおさらいすることにしました。

どんな関数？

componentDidUpdateとは、setStateで何かの値が更新された後に呼ばれる関数のこと。

メリット

・更新後の値を一番安全に取ることができる場所

・更新前の値を拾うことができる

・componentDidUpdate内でsetStateしても余計な描画をしないのでユーザーに違和感を与えない

基本的な使い方

componentDidUpdate(prevState) {
  if (this.state.name !== prevState.name) {
    console.log("nameが変更されました")
  }
}

注意点

基本的には更新前の値と更新後の値を比較して何か作業を追加するのが主です。

正しく比較しないとupdate->setState->render->update->setState->renderと無限ループを

起こすので必ず更新前の値と更新後の値を正しく比較した上で処理を追加する必要があります。

まとめ

何か更新されたあとの結果次第で処理を追加したい時は実装するべきだと思います。

使い方がシビアで、何も考えずに実装するとループを起こしたりバグを生んだりとややめんどうな

動きですが現状では更新後の比較を安全にできるのがこの関数だけなのでまあ妥協です。