Jotai
https://gyazo.com/74dc2d5e578ec52e06b36b52c38e386c
Recoilを参考にしてよりシンプルを追求した状態管理ライブラリ
https://jotai.org/
サンプルコード
code:js
import { atom, useAtom } from 'jotai'
// Create your atoms and derivatives
const textAtom = atom('hello')
const uppercaseAtom = atom(
(get) => get(textAtom).toUpperCase()
)
// Use them anywhere in your app
const Input = () => {
const text, setText = useAtom(textAtom)
const handleChange = (e) => setText(e.target.value)
return (
<input value={text} onChange={handleChange} />
)
}
const Uppercase = () => {
const uppercase = useAtom(uppercaseAtom)
return (
<div>Uppercase: {uppercase}</div>
)
}
// Now you have the components
const App = () => {
return (
<>
<Input />
<Uppercase />
</>
)
}
teramotodaiki.icon
RecoilがAtomとSelectorを区別しているのに対して、Jotaiはその２つをまとめてAtomと呼んでいるようだ
実際、RecoilでもAtomは(ReadWrite)Selectorをラップして作られている
miyamonz.icon
jotai好きです
Recoilよりも
ソースコードが読みやすい
キーが要らない
初手jotai入れがち