Recoil
大前提
参考URL 状態の取得だけであれば再レンダリングは走らない(useRecoilValue)
私は Recoil を触る前は、 Context vs Recoil というイメージを持っていました。しかしその理解は少し違っていたみたいです。 Recoil は Context を内部的に使っていて、 atom と selector をうまく活用することで再レ ンダリングを抑えているといった方が正しそうです。
Recoil Root
What? Contextでは小さく状態管理ができる。Recoilでもできないだろうか
落とし穴
_app.tsx
はRecoilRootに囲われていないためRecoil関連が使用できない。
Atom
※Atomはコンポーネント内で定義ができない。 Atomは状態管理するためのデータストアのことです。 AtomはkeyでAtomひとつひとつにユニークなIDを設定し、defaultで初期値を設定できます。
method
useRecoilState
を使えば状態を取得、更新の両方が可能
useRecoilValue
取得だけしたい場合
// 取得だけの場合はuseRecoilValueを使用
const text = useRecoilValue(textState);
useSetRecoilState
更新だけしたい場合
// 更新だけの場合はuseSetRecoilStateを使用
const setText = useSetRecoilState(textState);
Selector
※Atomが更新される度に再実行される。 SelectorはAtomのstateを加工した値を返したり、Atomのstateを加工して更新するなどの処理を可能にする。 Atom同様、keyでSelectorにユニークなIDを設定する。 getでstateを加工した値を返し、setでstateを加工して更新する。 defaultはない。