Back to articles
Jotai Has a Free Atomic State Manager That Makes React State Actually Simple

Jotai Has a Free Atomic State Manager That Makes React State Actually Simple

via Dev.to ReactAlex Spinov

Redux has 27 files for a counter app. Zustand simplified it. Jotai made it atomic . Jotai is a primitive and flexible state management library for React that takes an atoms-based approach — inspired by Recoil, but simpler, smaller (3.4KB), and with zero boilerplate. The Core Idea: Atoms import { atom , useAtom } from " jotai " ; // Define an atom (like a signal/ref) const countAtom = atom ( 0 ); const nameAtom = atom ( " World " ); // Use in any component — no providers needed! function Counter () { const [ count , setCount ] = useAtom ( countAtom ); return < button onClick = {() => setCount ( c => c + 1 )} > { count } < /button> ; } That is it. No store. No reducers. No actions. No selectors. Derived Atoms (Computed State) const todosAtom = atom < Todo [] > ([]); const filterAtom = atom < " all " | " done " | " undone " > ( " all " ); // Derived atom — automatically recomputes const filteredTodosAtom = atom (( get ) => { const todos = get ( todosAtom ); const filter = get ( filterAtom

Continue reading on Dev.to React

Opens in a new tab

Read Full Article
3 views

Related Articles