なぜRecoilを推しているのか
recoilはreactで使う状態管理ライブラリの一つで、とてもコンパクトにグローバルステートを作り出すことが出来ることと学習コストの低さ、管理のしやすさが魅力です。
下記でrecoilや他の状態管理のhooksやライブラリを解説していきます。
Recoil
metaが提供しているというのが一つ目の利点です。 reactもmetaが提供しているのでサポート的な面で見ても安心でしょう。
また、reactではどこかのstateを更新すると全ての子コンポーネントが更新されるみたいなことが起こりえます。
recoilではそれぞれのstateの状態をatomに持たせてあげるだけでstateの更新による再レンダリングの問題は解決します。
useContext
ReactHooksの一つなのでライブラリを入れずに解決できるのが利点だと思ってます。
また、学習コストも低いので最初はuseContextから始めるのもアリだと思います。
欠点としてはuseContextのでstate管理した場合は再レンダリングが走ります。
再レンダリングが走って困る場合と困らない場合があるので一概に悪いとは言えませんが、もしも再レンダリングを無くして解決したい問題があるならrecoilを使うことをおすすめします。
そして、あまり使いすぎるとproviderタワーが肥大化するのも欠点でしょう。
Redux
古参の状態管理ライブラリで一定の人気がありますし、大規模なプロジェクトに向いています。
欠点 めんどくさい（これにつきます。すみません）
recoilでGlobalStateを作ってみる
まずはグローバルに状態管理をするためにatomを作りましょう。
store.ts
import { atom } from "recoil";
export const authMessage = atom<string>({
key:'auth-message',
default:""
});
index.tsx
import {useRecoilState} from "recoil";
import {authMessage} from "../store.ts"
const [message,setMessage] = useRecoilState(authMessage);
後はこうしてあげればグローバルに使用できるstateの完成です。
どこからでもatomを経由して同じstateのデータにアクセスできるからとても簡単ですね。
以上でrecoilの説明について終わります。ではでは良いreactライフを！
Share this post