このuseEffectは不要だとおれのサイドエフェクトが言ってます

すいません、そんなサイドエフェクトは持っていません・・・

ワールドトリガー面白いですよね。

こんにちは、株式会社Azoopで主にトラッカーズマネージャーの開発をしている中山です。

TL;DR

Reactの公式ページリニューアルされてとても良きです・・・

react.dev

駄文

少し前にReactの公式ページがリニューアルされて、面白そうな学習ページが増えたり、練習問題がたくさん用意されたりして、React学習の敷居が少し下がったなと感じました。

非常にいいページなので、紹介したくブログを書きました。

ぜひ見てください!!!(完)

react.dev

とするのは乱暴なので、自分が見て気に入ったページの

You Might Not Need an Effect – Reactの内容を一部、感想を添えて紹介したいと思います。

PropsやStateに基づく、Stateの更新

Updating state based on props or state

下にこのケースに該当するコードの例を置いています。

あるStateが更新された際に、別のStateを更新したい例です。

このケースは例くらい分かりやすい状態だとあまり発生しないかなと思います。

Stateの数が増えてきて、ソースコードが複雑になってきた時に発生しうるかなと思います。

  • useEffectの中でsetStateを行っている
  • useEffectの第2引数に変数が多く並んでいる

上記の場合は、このケースに該当するかもしれない・・・と疑ってソースコードを見ています。

例) useEffect削除前

例) useEffect削除後

Propsが変化したときに、Stateの値をリセットする

Resseging all state when a prop changes

下にこのケースに該当するコードの例を置いています。

あるPropsやStateの変化に応じて、フォームの値をクリアしたい例です。

これは過去、自分もuseEffectを使って書いてしまったなと反省しています😇

コンポーネントの状態をkeyを使ってリセットできるということを知らなかったが故の苦肉の策でした・・・

  • useEffectの中でsetState(""), setState(null)などを行っている

上記の場合は、このケースに該当するかもしれない・・・と疑ってソースコードを見ています。

例) useEffect削除前

例) useEffect削除後