Recoil
https://www.youtube.com/watch?time_continue=200&v=fb3cOMFkEzs&feature=emb_title
Meta製のReactのstate管理ライブラリ
まだexpetimental
Flowで書かれている
大きく2つの概念がある
任意のComponentsからアクセスできるglobalなstateであるatom
それを計算した状態を保持するselector
公開されたのは2020/5/15頃
website
github
docs
RecoilのメンテナがMetaのレイオフに会い、継続が困難(?)になっているらしい
https://www.linkedin.com/posts/douglas-armstrong-384a342_opentowork-meta-layoffs-activity-6996668167511052288-UoE4/
What's happening in the future of recoil? · Issue #1495 · facebookexperimental/Recoil · GitHub
日本では2023/7にTwitterで話題に上がってたが、たぶんもっと以前からの話
Recoilのtest
RecoilRoot
docs
これ以下で扱うAtomのkeyは互いにuniqでないといけない
普通はAppらへんのRootに置かれる
Recoil State
Recoilのatom
Recoilのselector
family
RecoilのatomFamily
selectorFamily
API
useRecoilState
useRecoilValue
useSetRecoilState
useRecoilCallback
useResetRecoilState
RecoilのLoadable
useRecoilStateLodable
useRecoilValueLoadable
isRecoilValue
https://recoiljs.org/docs/api-reference/core/isRecoilValue
constSelector
https://recoiljs.org/docs/api-reference/utils/constSelector
errorSelector
https://recoiljs.org/docs/api-reference/utils/errorSelector
noWait
https://recoiljs.org/docs/api-reference/utils/noWait
waitForAll
https://recoiljs.org/docs/api-reference/utils/waitForAll
https://zenn.dev/algovitae/articles/2022recoilloop
waitForAllSettled
https://recoiljs.org/docs/api-reference/utils/waitForAllSettled
waitForNone
https://recoiljs.org/docs/api-reference/utils/waitForNone
waitForAny
https://recoiljs.org/docs/api-reference/utils/waitForAny
useRecoilTransaction
useRecoilRefresher_UNSTABLE
参考
Facebook製の新しいステート管理ライブラリ「Recoil」を最速で理解する - uhyo/blog
Recoil発表直後の@uhyo氏の解説
パフォーマンス観点のuseContextとの比較など
Recoilの基本的な使い方の概説
#WIP
0.2.0が出た
https://recoiljs.org/blog/2021/03/22/0.2.0-released/
v0.5
https://tech.kitchhike.com/entry/react-native-features-202111
ReactのComponent Treeとは全く独立に状態グラフを持つ
React上で状態を扱うと、状態が変わるたびに再renderingが起きてしまうが、それを防げる
hooks同士の連携をする際に、再処理するたびにわざわざ再renderingは不要
Reactとは別の場所で状態を管理することでそれができる
renderingの回数を抑えられる
https://gyazo.com/38b265924e17529b26791bad4f091170
https://github.com/bloodyowl/reason-recoil
Reason版
Recolize
Recoilのdebugger
deux dev toolsみたいなやつ
github
良さそうだが、このエラーが解決できないので使ってないmrsekut.icon
recoil-sync
recoil-persist
https://github.com/polemius/recoil-persist
recoilのkeyの命名
https://zenn.dev/babel/articles/recoil-for-babel
ただ、最近アイデアが発表されたuse APIは、非同期なステートを全部PromiseとuseMemoにしてしまうことでRecoilの機能を代替できる可能性を秘めています。これが実用化されるとRecoilを採用する意味が薄れてくる可能性はありますね。
https://uit-inside.linecorp.com/episode/49
https://nulab.com/ja/blog/nulab/recoil-example/
https://wes-rast.medium.com/recoil-project-structure-best-practices-79e74a475caa
ベスプラ
https://medium.com/weknow-network/recoil-patterns-hierarchic-separation-9e7e1ea40895
Recoil Patterns: Hierarchic & Separation
https://javascript.plainenglish.io/moving-from-redux-to-recoil-42aa9d9cfaad
/study-react/Recoil が面白いので Redux との違いを説明してみる