
Jotai Has a Free Atomic State Library — Here's How to Use It
Global state doesn't have to be global. Jotai gives you atoms — tiny pieces of state that compose together. Only components reading an atom re-render when it changes. What Is Jotai? Jotai takes an atomic approach to React state management. Instead of one big store, you create independent atoms that components subscribe to individually. Think of it as "React useState, but shareable." Quick Start npm install jotai import { atom , useAtom } from ' jotai ' ; // Create atoms const countAtom = atom ( 0 ); const nameAtom = atom ( ' World ' ); // Derived atom — automatically updates const greetingAtom = atom (( get ) => `Hello, ${ get ( nameAtom )} ! Count: ${ get ( countAtom )} ` ); function Counter () { const [ count , setCount ] = useAtom ( countAtom ); return < button onClick = {() => setCount ( c => c + 1 )} > { count } < /button> ; } function Name () { const [ name , setName ] = useAtom ( nameAtom ); return < input value = { name } onChange = {( e ) => setName ( e . target . value )} />
Continue reading on Dev.to React
Opens in a new tab


