株式会社RevCommでは一緒に働く仲間を募集しています
【Recoil】RecoilRoot をネストした状態管理
こんにちは!
RevComm に2022年1月に入社したフロントエンドエンジニアの小山 (koji-koji) です。
RevComm では、 React を採用しているサービスの状態管理に Recoil を使っています。今回は Recoil の理解をより深めるために Context と比較してみました。
Context では小さく状態管理できる。 Recoil でもできないか?
Context の状態管理のスコープは<Context.Provider>
で括った対象であり、一方 Recoil では<RecoilRoot>
で括った対象です。
Context では、ルートコンポーネント以外を<Context.Provider>
で括った場合、子コンポーネントでの変更はグローバルには反映されません。
ローカルではないけれど、グローバルというほど大きくなく状態管理をしたいときに使えます。それが Recoil でもできるのか?と考えました。
Recoil ではatomFamily()
を使って atom の key を動的に生成する方法があるようです。これはリストを扱うときは良さそうです。一方、リストでない場合もあるので、もう少し調べてみました。
続きはこちらで!
https://tech.revcomm.co.jp/2022/05/23/scoped-state-with-recoilroot
過去のBlogも是非ご覧ください!!