Redux に変わる状態管理ライブラリとして
・Facebook謹製の Recoil
・React Query
が注目を集めています。
Recoil
最初に公開されたのが2020年5月15日あたりのようです。
Recoil
https://recoiljs.org
2021年8月27日時点で 0.4 がリリースされています。
0.3 の時点でもいくつか Breaking Changes があり、まだ発展途上のような気がしないでもありません。
facebookexperimental/Recoil – github
https://github.com/facebookexperimental/Recoil
Redux で、結構課題がでているようなので、Recoil で解決されるといいですね。
要期待です。
Recoil が面白いので Redux との違いを説明してみる
https://scrapbox.io/study-react/Recoil_%E3%81%8C%E9%9D%A2%E7%99%BD%E3%81%84%E3%81%AE%E3%81%A7_Redux_%E3%81%A8%E3%81%AE%E9%81%95%E3%81%84%E3%82%92%E8%AA%AC%E6%98%8E%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B
Reactの新しい状態管理ライブラリ「Recoil」とは？ Reduxとの違いを解説
https://ics.media/entry/210224/
Reactの状態管理はReduxの独走状態、2位は大きく離れてswrとreact-queryが競り合い中・・
https://qiita.com/masakinihirota/items/b16ca9a61b835d50c8ec
Facebook製の新しいステート管理ライブラリ「Recoil」を最速で理解する – 2020年5月16日
https://blog.uhy.ooo/entry/2020-05-16/recoil-first-impression/
React Query
Performant and powerful data
synchronization for React
React Query
https://react-query.tanstack.com
今までは State 管理といえば、Redux でしたが、ここ最近いろんな State 管理ライブラリが出てきています。
その中でも私が一番使いやすいなと思っているのが、React Queryです。
実際、今携わっているプロジェクトでは Redux を使っているのですが、
action,reducer,api 周りなどやっぱりコード量が多くなってしまうことがつらみになっています。React Queryの特徴としては
取得したデータをキャッシュに持たせる
キャッシュされたデータをどのコンポーネントからでも簡単に利用可能
Fetch の状態を返してくれる(isLoading, error など)
があります。個人的には以前に Apollo を使っていたので、isLoading などの Fetch の状態があるのはとても好印象でした。
REST API なら React Query がファーストチョイス – 2021.3.2
https://zenn.dev/brachio_takumi/articles/20210226-react-query
React Context
React Contextとは
これみたいなのです。
return <Context.Provider value={value}>{children}</Context.Provider>
React Conetxtって？
Reactでは、基本的にコンポーネントがコンポーネント外から動的に値を受け取る方法はpropsのみです。
Reduxを使用する場合でも、react-reduxなどによってStoreの値をprops経由でコンポーネントに渡しますね。Contextは、propsとは別の方法でコンポーネントに動的に値を渡す、React純正のAPIです。
これを使えば、props バケツリレーをしなくて済むのでしょうか？
Redux のようなものですかね？
以下に詳しく解説されてます。
React Contextの使い方
https://qiita.com/ryokkkke/items/dc25111fcf52ea579d58
コンテクスト
https://ja.reactjs.org/docs/context.html
React Context API と useContext() の使い方
https://gotohayato.com/content/523
ぼくのかんがえたさいきょうの useState + useContext よりも Redux のほうが大抵勝っている
https://zenn.dev/kazuma1989/articles/68c2339e056530
React hooksを基礎から理解する (useCallback編+ React.memo)
https://qiita.com/seira/items/8a170cc950241a8fdb23
React Hooksで useState内にデータが入らないとき
https://teratail.com/questions/225053
最近Reactを始めた人向けのReact Hooks入門
https://sbfl.net/blog/2019/11/12/react-hooks-introduction
Reactの新しい状態管理ライブラリ「Recoil」とは？ Reduxとの違いを解説
https://ics.media/entry/210224
Recoil が面白いので Redux との違いを説明してみる
https://scrapbox.io/study-react/Recoil_%E3%81%8C%E9%9D%A2%E7%99%BD%E3%81%84%E3%81%AE%E3%81%A7_Redux_%E3%81%A8%E3%81%AE%E9%81%95%E3%81%84%E3%82%92%E8%AA%AC%E6%98%8E%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B
その他記事
SWRはローカルの状態管理としても使える
https://zenn.dev/tak_iwamoto/articles/39aefec675c323
Next.jsとRecoilでブラウザがリロードされてもStateを保持する
https://zenn.dev/someone7140/articles/8a0414a0236142
Reactの状態管理はReduxの独走状態、2位は大きく離れてswrとreact-queryが競り合い中・・
https://qiita.com/masakinihirota/items/b16ca9a61b835d50c8ec
コメント