
Jotai Has a Free API That Brings Atomic State Management to React
Jotai takes an atomic approach to React state — bottom-up, composable, and incredibly efficient. No stores, no reducers, no selectors. Atoms: The Building Blocks import { atom , useAtom } from " jotai " ; // Primitive atom const countAtom = atom ( 0 ); const nameAtom = atom ( " World " ); // Derived atom (computed) const doubledAtom = atom (( get ) => get ( countAtom ) * 2 ); const greetingAtom = atom (( get ) => `Hello, ${ get ( nameAtom )} !` ); // Read-write derived atom const celsiusAtom = atom ( 25 ); const fahrenheitAtom = atom ( ( get ) => get ( celsiusAtom ) * 9 / 5 + 32 , ( get , set , newF : number ) => set ( celsiusAtom , ( newF - 32 ) * 5 / 9 ) ); function Temperature () { const [ fahrenheit , setFahrenheit ] = useAtom ( fahrenheitAtom ); return < input value = { fahrenheit } onChange = { e => setFahrenheit ( + e . target . value )} /> ; } Async Atoms const urlAtom = atom ( " https://api.example.com/data " ); const dataAtom = atom ( async ( get ) => { const url = get ( urlA
Continue reading on Dev.to React
Opens in a new tab



