Reactでロジックをhooksにまとめないという選択肢 - Hello Tech

javascripterです。ハローでは、プロダクトのローンチ前からAutoReserve の開発に関わっています。 突然ですが、Reactを使用する際、コンポネントのロジックや状態が増えてきたとき、みなさんはどうされてるでしょうか。 関数コンポネントでは、一般にcustom hooksとしてまとめて切り出すことが多く行われていると思います。 今回の記事では、useState/useRef + custom hooksという単位で切り出すのではなく、 クロージャを使いロジックや状態をコンポネントの外に持たせるようにリファクタリングすることで、コードの見通しが良くなる、という事例を紹介します。 JavaScriptにおけるクロージャとは、関数が外側のスコープの変数などへの参照を保持できる機能のことです。ここではクロージャとして実装しましたが、同等のことはclassを使っても実装できます。 A

[yarumato]

“useState/useRef + custom hooksという単位で切り出すのではなく、 クロージャを使いロジックや状態をコンポネントの外に持たせる。classを使ってもクロージャと同等の実装できます”

[shingo-sasaki-0529]

React に依存しているコードをなるべく減らしたほうが使い勝手も良いしテスタビリティも高いという話。

[efcl]

React Hooksの外にstateを移す方法

[takaesu]

hooks外にする

[mizdra]

良い

[twotiger]

ポンコツロボットが勝手に店に電話をしてイタ電になってる。そんな炎上案件があったとは知らなかった

[nicht-sein]

"createChartResponder内ではrefを使わず普通の変数を自由に使ってコードを書ける"私の理解が甘いのだろうけど、createChartResponder内でrefを使っているように見える。Reactわかんない

[PerolineLuv]

AutoReserve、AI電話予約が飲食店にイタ電状態の迷惑をかけまくって、ここ経由の予約拒否店続出で大炎上してるアレか。

[Pasta-K]

良い