local state にすべきところを global state にしてバグを生んだ

Composition API のロジック分離で、ロジックと状態を hooks/usecases のような責務のファイルに分離したまではよかったんだけど、状態をグローバルに持ってしまっていたせいで状態が残ってしまいバグになっていた。

最初はコンポーネントが破棄された際になにか問題があるのかと思ってライフサイクルをよく確認し直したが問題なさそうで、state をどのように管理しているかを考えたときに切り出した state がグローバルな状態になっていることを思い出して修正して事なきを得た。

そもそも、useXxxのような関数の内部にロジックと状態を切り出したら local、外部で定義しuseXxxで return することで global な状態になる。前にも書いたが、これは前提で重要なことなので、これ起因でバグを生まないようにしたい。

また、global な状態を local にするのは、今回のケースでは大きくなく利用箇所も一つだけだったのですぐに修正できたが、利用箇所が増えたり複雑になっていったりすればすぐに対応するのは難しそう。現に、複数箇所で呼ばれている関数や状態も同じファイル内に存在したが、とりあえずで local なスコープに閉じ込めたところすぐに壊れた。

global な状態は安易に書き換えられないようにreadonlyアクセス修飾子をつけるのを早めに対応したいかもしれない。