ブラウザ拡張開発日記

作ってるもの→ https://chrome.google.com/webstore/search/cside?_category=extensions

React の状態管理ツールをひととおり触った所感

「たったこれだけで "ひととおり" って言うな!」というツッコミは甘んじて受けます。

触ったもの

useReducer + useContext

  • 👍 React 本体の知識だけで使える
  • ❌ reducer に非同期処理を書けない
  • ❌ Context が増えてきたら非常に読みづらくなる
  • ❌ 結果的に劣化 Redux ができがちなので、よっぽど小規模でない限りわざわざ採用するメリットは無い

Redux Toolkit

  • 👍 素 Redux と比べてボイラープレートコードは減った
  • ❌ 非同期処理の絡むコードは必ずしも読みやすくない(私見
    • 非同期の処理は extraReducers という所に分けて書かないといけないところとか。あと builder.addCase() とか読みやすいか ... ?

Recoil / Jotai *1

  • 👍 非同期処理の絡む state の更新処理を、非同期処理の開始と終了で分断することなく1つの関数の中に書けるので、個人的には一番読みやすいし書きやすい
  • ❌ まだ Redux ほど市民権は得てない認識なので、自分以外の人が触るリポジトリに導入するのは若干まだ躊躇いがある
    • とはいえ見た目はほぼ useState なので学習コストは知れているが

結論

  • 自分は Recoil / Jotai が好み。

*1:Jotai ... Recoil と概念は同じ。より API がシンプル https://jotai.org/