npmBeginner-friendly

jotai

Primitive and flexible state management for React based on atomic state units.

statereactatomshookstypescript

The Problem

Redux has too much boilerplate. Context re-renders everything. Zustand is great but stores are global objects — you can't easily create per-component or per-instance state that still works across the tree. You want something simpler that feels like useState but works globally.

Mental Model

Jotai models state as atoms — tiny independent units, like useState but shared. Any component can read or write any atom. Atoms can derive from other atoms (like computed properties). The React tree only re-renders where the atom is actually used.

60-second start

Replace useState with a shared atom

npm install jotai
// store.ts
import { atom } from 'jotai'
export const darkModeAtom = atom(false)
import { useAtom } from 'jotai'
import { darkModeAtom } from './store'

function Toggle() {
  const [dark, setDark] = useAtom(darkModeAtom)
  return <button onClick={() => setDark(v => !v)}>{dark ? '🌙' : '☀️'}</button>
}

function Page() {
  const dark = useAtomValue(darkModeAtom)  // read-only, no re-render on write
  return <div className={dark ? 'dark' : ''}><Toggle /></div>
}

Use it when

React apps needing shared state without prop drilling, derived/computed state that updates automatically, fine-grained re-render control, per-route or per-feature isolated state.

Skip it when

Non-React environments (Jotai is React-only). Complex state machines (use XState). Apps already committed to Redux with large middleware ecosystems.

Alternatives

zustandStore-based rather than atom-based, slightly simpler for flat state, easier devtools.

recoilFacebook's atom model, similar concept but larger bundle and less maintained.

valtioProxy-based reactive state, mutable-style mutations, very simple API.

reduxBattle-tested, excellent devtools, best for very large apps with complex state logic.

Ready to explore the full API?

See every class, function, and relationship in an interactive graph.