Jotai - 🐾 Nekonote

Jotai

https://gyazo.com/ae3339612af90b2b5b0062d2af4851bb

Reactでの利用を想定した軽量で高速な状態管理ライブラリ

code:sample.ts

import { Provider, atom, useAtom } from 'jotai'

const textAtom = atom('hello')

const textLenAtom = atom((get) => get(textAtom).length)

const uppercaseAtom = atom((get) => get(textAtom).toUpperCase())

const Input = () => {

const text, setText = useAtom(textAtom)

return <input value={text} onChange={(e) => setText(e.target.value)} />

}

const CharCount = () => {

const len = useAtom(textLenAtom)

return <div>Length: {len}</div>

}

const App = () => (

</Provider>

)

export default App