【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も是非ご覧ください！！