First, create a primitive atom

import{atom}from'jotai'constcountAtom=atom(0)constcountryAtom=atom('Japan')constcitiesAtom=atom(['Tokyo','Kyoto','Osaka'])constmangaAtom=atom({'Dragon Ball':1984,'One Piece':1997,Naruto:1999})

Use the atom in your components

import{useAtom}from'jotai'functionCounter(){const[count,setCount]=useAtom(countAtom)return(<h1>{count}<buttononClick={()=>setCount((c)=>c+1)}>one up</button>      ...

Create derived atoms with computed values

constdoubledCountAtom=atom((get)=>get(countAtom)*2)functionDoubleCounter(){const[doubledCount]=useAtom(doubledCountAtom)return<h2>{doubledCount}</h2>}

Creating an atom from multiple atoms

constcount1=atom(1)constcount2=atom(2)constcount3=atom(3)constsum=atom((get)=>get(count1)+get(count2)+get(count3))

constatoms=[count1,count2,count3, ...otherAtoms]constsum=atom((get)=>atoms.map(get).reduce((acc,count)=>acc+count))

Derived async atoms

consturlAtom=atom('https://json.host.com')constfetchUrlAtom=atom(async(get)=>{constresponse=awaitfetch(get(urlAtom))returnawaitresponse.json()})functionStatus(){// Re-renders the component after urlAtom is changed and the async function above concludesconst[json]=useAtom(fetchUrlAtom)...

You can create a writable derived atom

constdecrementCountAtom=atom((get)=>get(countAtom),(get,set,_arg)=>set(countAtom,get(countAtom)-1))functionCounter(){const[count,decrement]=useAtom(decrementCountAtom)return(<h1>{count}<buttononClick={decrement}>Decrease</button>      ...

Write only derived atoms

constmultiplyCountAtom=atom(null,(get,set,by)=>set(countAtom,get(countAtom)*by),)functionControls(){const[,multiply]=useAtom(multiplyCountAtom)return<buttononClick={()=>multiply(3)}>triple</button>}

Async actions

constfetchCountAtom=atom((get)=>get(countAtom),async(_get,set,url)=>{constresponse=awaitfetch(url)set(countAtom,(awaitresponse.json()).count)})functionControls(){const[count,compute]=useAtom(fetchCountAtom)return(<buttononClick={()=>compute('http://count.host.com')}>compute</button>...

Note about functional programming

Links