【React】Elmを学習すると無駄なuseEffectが減る理由
React初心者の頃、コンポーネントのそこかしこにuseEffectを使ってしまい、状態更新の流れが追いづらくなるという経験を山ほどしてきました。しかし、
Elmを学習してからは無駄なuseEffectに気付けるようになり、useEffectを書く機会が減ったなと感じています
そこで、Elmを学習するとなぜ無駄なuseEffectが減るのかを解説し、この記事を読んだ方がElmを学習するきっかけになればと思い、この記事を書いてみました
なぜElmを学習すると無駄なuseEffectが減るのか？
Reactでは状態を更新する際に、buttonなどのイベントから状態を更新するか、状態の更新に伴う副作用 (useEffect) を使って状態を更新するかの2パターンがあります
ReactではuseEffectの使い勝手がすごく良いため、状態の更新がイベントやuseEffectの中に散らばってしまい、どこで状態が更新されているのか追いづらくなりがちです
一方で、Elmでもイベントや副作用から状態を更新するのですが、状態の更新は全てupdate関数の中に集約されます
そのため、イベントも副作用も同じ関数の中に行き着くので、まとめれそうなところはまとめようという意識が働きやすくなります
また、Elmの副作用では、イベント (状態更新) → 副作用 → 次の副作用というように一方向にデータが流れていくので、状態の更新がまとめやすいという特徴があります
その結果、イベント内で状態の更新が完結できるにも関わらず副作用を使って状態を更新してる時に気づきやすくなります
最終的に、
Reactで実装する際にも、状態の更新を副作用なしでできないか考える癖が身につき、無駄なuseEffectが減るようになるのです
ついでに無駄なuseStateも減る
Elmを学習することで、無駄なuseStateも減るようになります
Elmでは、状態の管理をModelと呼ばれる1つのオブジェクトに集中しています
状態が1箇所に集中している分、二重管理になっている部分があれば状態更新時に気付けるため、余分に状態を持つことが減るようになります
その結果、
状態を二重管理していないか意識する癖が身につき、Reactでも無駄なuseStateが減るようになります
まとめ
Elmを学習することで、無駄なuseEffectやuseStateが減る理由について解説してみました
他にも、Elmを学習することでReactの設計に活かせることは多いので、興味がある方はぜひ以下のリンクから学習してみてください！
Discussion