Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What is going on with this article?
@ape

Reactの状態管理ライブラリまとめ

はじめに

今回はReactのReactの状態管理ライブラリについてまとめていきます。
勉強したアウトプットと備忘録として残していこうと思います。

現在の状態管理ライブラリの状況と概要

  • Redux : デファクトスタンダード?
  • Recoil : Facebook社が開発
  • useContext : React16.8から標準のhooksで使える
  • SWR : Next.jsと同じZeit社が開発
  • Apollo Client : Graph QLとの相性
  • react-query : 個人的に推したい新進気鋭

下の3つは状態管理というよりもキャッシュを管理するライブラリである。

Reduxの特徴

  • Action →  ActionCreator → Reducer → Storeの流れで状態の変更を管理
  • 流れが一方向なので状態管理をしやすい
  • reselectによる値の参照とメモ化が強力
  • フロントエンドにビジネスロジックが集中しても対応可能
  • パフォーマンスチューニングしやすい
  • Fluxフローの概念の理解が必要
  • とにかく手続きが多い

useContextの特徴

  • createContext()で生成したコンテクストオブジェクトで一元管理
  • 配下のコンポーネントでuseContextを使って参照可能
  • Reduxよりもシンプル
  • 更新頻度が低い状態の管理に最適
  • 管理している値が変化すると再レンダリングが走る
  • パフォーマンスチューニングが面倒

react-queryの特徴

  • フェッチしたデータをキャッシュとして利用する
  • キャッシュをどのコンポーネントからでも簡単に参照できる
  • データ再フェッチの間隔や回数を調整
  • フェッチの状態を返してくれる(isLoading, errorなど)
  • フロントエンド先行でバックエンドの設計を必要
  • フェッチしたデータを再加工しにくい

まとめ

Redux useContext React-query
導入の容易さ ⭕️ 🔺
パフォーマンスチューニング ⭕️ 🔺 ⭕️
値の参照 ⭕️ 🔺 ⭕️
値の管理方法 1つのオブジェクト(store) オブジェクト(複数作成可能) APIレスポンスの戻り値(クエリごとに管理)
向いているアプリ 書き込みが多い 読み取りが多い どちらもOK

参考

【群雄割拠】Reactの状態管理ライブラリ事情【2020年末版】

1
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
1
Help us understand the problem. What is going on with this article?