Back to articles
Jotai Has a Free Atomic State Library — Here's How to Use It

Jotai Has a Free Atomic State Library — Here's How to Use It

via Dev.to ReactAlex Spinov

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

Read Full Article
4 views

Related Articles