!Jotai (light mode)

visit jotai.org or npm i jotai


Jotai scales from a simple useState replacement to an enterprise TypeScript application.

- Minimal core API (2kb)
- Many utilities and extensions
- No string keys (compared to Recoil)

Examples: Demo 1 |
Demo 2

$3

An atom represents a piece of state. All you need is to specify an initial
value, which can be primitive values like strings and numbers, objects, and
arrays. You can create as many primitive atoms as you want.

``jsx
import { atom } from 'jotai'

const countAtom = atom(0)
const countryAtom = atom('Japan')
const citiesAtom = atom(['Tokyo', 'Kyoto', 'Osaka'])
const mangaAtom = atom({ 'Dragon Ball': 1984, 'One Piece': 1997, Naruto: 1999 })
`

$3

It can be used like React.useState:

`jsx
import { useAtom } from 'jotai'

function Counter() {
const [count, setCount] = useAtom(countAtom)
return (



{count}
setCount((c) => c + 1)}>one up
...
`

$3

A new read-only atom can be created from existing atoms by passing a read
function as the first argument. get allows you to fetch the contextual value
of any atom.

`jsx
const doubledCountAtom = atom((get) => get(countAtom) * 2)

function DoubleCounter() {
const [doubledCount] = useAtom(doubledCountAtom)
return

{doubledCount}


}
`

$3

You can combine multiple atoms to create a derived atom.

`jsx
const count1 = atom(1)
const count2 = atom(2)
const count3 = atom(3)

const sum = atom((get) => get(count1) + get(count2) + get(count3))
`

Or if you like fp patterns ...

`jsx
const atoms = [count1, count2, count3, ...otherAtoms]
const sum = atom((get) => atoms.map(get).reduce((acc, count) => acc + count))
`

$3

You can make the read function an async function too.

`jsx
const urlAtom = atom('https://json.host.com')
const fetchUrlAtom = atom(async (get) => {
const response = await fetch(get(urlAtom))
return await response.json()
})

function Status() {
// Re-renders the component after urlAtom is changed and the async function above concludes
const [json] = useAtom(fetchUrlAtom)
...
`

$3

Specify a write function at the second argument. get will return the current
value of an atom. set will update the value of an atom.

`jsx
const decrementCountAtom = atom(
(get) => get(countAtom),
(get, set, _arg) => set(countAtom, get(countAtom) - 1)
)

function Counter() {
const [count, decrement] = useAtom(decrementCountAtom)
return (



{count}
Decrease
...
`

$3

Just do not define a read function.

`jsx
const multiplyCountAtom = atom(null, (get, set, by) =>
set(countAtom, get(countAtom) * by),
)

function Controls() {
const [, multiply] = useAtom(multiplyCountAtom)
return multiply(3)}>triple
}
`

$3

Just make the write function an async function and call set when you're ready.

`jsx
const fetchCountAtom = atom(
(get) => get(countAtom),
async (_get, set, url) => {
const response = await fetch(url)
set(countAtom, (await response.json()).count)
}
)

function Controls() {
const [count, compute] = useAtom(fetchCountAtom)
return (
compute('http://count.host.com')}>compute
...
``

$3

Jotai's fluid interface is no accident — atoms are monads, just like promises!
Monads are an established>)
pattern for modular, pure, robust and understandable code which is optimized for change.
Read more about Jotai and monads.

Links

- website
- documentation
- course