jotai
Jotai is a primitive and flexible state management library for React that takes an atomic approach inspired by Recoil but with a simpler, more minimalist API. T…
Installation
npm install jotai
yarn add jotai
pnpm add jotai
Import
import { atom, useAtom } from 'jotai';Quick Example
import { atom, useAtom } from 'jotai';
const countAtom = atom(0);
const doubleAtom = atom((get) => get(countAtom) * 2);
function Counter() {
const [count, setCount] = useAtom(countAtom);
const [double] = useAtom(doubleAtom);
return <button onClick={() => setCount(c => c + 1)}>{count} ({double})</button>;
}About jotai
Jotai is a primitive and flexible state management library for React that takes an atomic approach inspired by Recoil but with a simpler, more minimalist API. The name means 'state' in Japanese. Jotai atoms are created with atom(initialValue) and used in components with useAtom(myAtom), providing both the value and a setter similar to useState. Derived atoms are created by passing a read function: atom((get) => get(countAtom) * 2). This atomic model means each piece of state is independent, components only re-render when the specific atoms they use change, and there is no need for a provider wrapper (though one is available for scoped state). Jotai supports async atoms that resolve promises, writable derived atoms, atom effects for side effects, and integration with various external stores through utilities like atomWithStorage (localStorage), atomWithQuery (React Query), and atomWithMachine (XState). The library is significantly smaller than Recoil and does not require string keys for atoms, reducing boilerplate. Jotai's bottom-up approach — composing complex state from small atoms — makes it particularly well-suited for component-level state that needs to be shared between siblings without lifting state to a common parent.
Quick Facts
| Package | jotai |
| Category | State Management |
| Weekly Downloads | 2M+ |
| License | MIT |
| Install | npm install jotai |
Related Packages
Zustand is a small, fast, and scalable state management library for React that provides a simple hoo…
Recoil is an experimental state management library for React developed by Facebook that provides a g…
Valtio is a proxy-based state management library for React that makes state management as simple as …
Redux is a predictable state container for JavaScript applications, most commonly used with React bu…
React is the most popular JavaScript library for building user interfaces, developed and maintained …
Browse npm Packages by Category
Explore our reference of 200 popular npm packages with install commands, examples, and quick-start guides.