414 文字
2 分

Reactの状態管理ライブラリについて比較雑感

質問を受けて、その場で話しながら書いたメモなので多分に間違いがあるかもしれない。

  • jotai
    • Atom ベース
      • 複数のアトムで、それを合成して提供する
    • Store ベースとは異なり複数の Atom で状態管理
    • Redux DevTools が利用できる
    • ほぼ Recoil と同じでより完結に書ける
      • 一意の key などを気にしなくて良い
    • useState+useContext の置き換えと見ることができる
      • これは Recoil と同じ
  • recoil
    • Atom ベース
    • Store ベースとは異なり複数の Atom で状態管理
    • Meta 製なので将来性はあるかも
    • パッケージサイズがかなり重い
    • 状態を一意の key を使って管理する
    • 未だ実験的な機能
    • コアメンバが解雇されほぼ放置されている
  • redux
    • Store ベース
      • Store という 1 つのオブジェクトとして管理し、各コンポーネントから参照できる
      • 誤解されがちだが、Store が 1 つである必要はない
    • Redux-Toolkit を利用しないとかなり冗長な記述になる
  • zustand (チュースタンド)
    • Store ベース
      • シングルステート
      • Redux よりも明示的に複数のオブジェクトを作れるため、Atom ベース寄り
    • Redux-Toolkit をさらに簡単にした感じ
    • サイズが軽い
    • Redux devTools を利用できる
    • 2022 年度 JavaScript Rising Starts で一番人気
    • 個人的には、SWR や React Query などを利用し、適切にコンポーネントを切っていれば状態管理ライブラリが本当に必要になるケースというのは、かなり限られると思っている。
    • そもそも個人的には SWR や React Query も、状態管理ライブラリだと思っている。
Reactの状態管理ライブラリについて比較雑感
https://blog.ohirunewani.com/posts/react-state-management-library-comparison/
作者
hrdtbs
公開日
2023-03-08
ライセンス
CC BY-NC-SA 4.0