Jotai - uki00a

Jotai

関連パッケージ

- TanStack Queryとの連携用のパッケージ

思想・背景

Conceptsページの要約

extra re-render問題の解消するために生まれた

この問題をuseContext+useStateで解決しようとすると、大量のContextと問題が起きてしまいがち (Provider hell問題など)

同様の問題を解決するためのライブラリの一つとしてuse-context-selectorが存在する

ただし、use-context-selectorを使う場合、再レンダリングを避けるためには、セレクタ関数が参照的に等価な値を返却する必要がある

Jotaiはこの問題に対して、異なるアプローチを取る (Recoilにインスパイアされたatomicモデル)

基本

primitive atoms

code:javascript

import { atom } from "jotai"

const countAtom = atom(0)

const messageAtom = atom("foobar")

derived atoms

code:javascript

const someReadonlyAtomAtom = atom((get) => get(countAtom) + 1)

const readableAndWritableAtom = atom(

(get) => get(countAtom) * 3,

(get, set, newCount) => {

set(countAtom, newCount)

}

)

atomの値を読み込む

code:javascript

const count, setCount = useAtom(countAtom)

Recoilとの違い

How Jotai Was Born · Daishi Kato's blog - Recoilなどとの比較やJotaiが作られた背景についてなど

参考