Features
- Atomic state model — bottom-up composition
- Derived atoms for computed state
- Async atoms for data fetching
- No string keys required (unlike Recoil)
- Integrations with React Query, Immer, URQL, and more
Pros
- Minimal API with atom() and useAtom()
- Fine-grained re-renders — only subscribers update
- Composable atoms avoid waterfall rendering
- Tiny bundle (~3kb gzipped)
Cons
- Atomic model requires different mental model
- Debugging can be harder than centralized stores
- Less structured for large application state
Overview
Jotai is an atomic state management library for React, inspired by Recoil but with a simpler API. The core concept is the “atom” — a unit of state that can be composed, derived, and subscribed to individually. Components only re-render when the specific atoms they use change.
Jotai’s bottom-up approach means you build complex state from small, composable atoms rather than managing a single centralized store. Derived atoms automatically track dependencies and recompute when their dependencies change. Async atoms handle data fetching natively, and integrations with libraries like TanStack Query extend its capabilities.
When to Use
Jotai is the right choice when you need fine-grained reactivity with a minimal API, when your state is naturally composed of independent pieces, or when you want to avoid unnecessary re-renders in React applications. It’s excellent for applications with many independent pieces of state.
Getting Started
npm install jotaiimport { atom, useAtom } from "jotai";
const countAtom = atom(0);
const doubledAtom = atom((get) => get(countAtom) * 2);
function Counter() {
const [count, setCount] = useAtom(countAtom);
const [doubled] = useAtom(doubledAtom);
return (
<button onClick={() => setCount((c) => c + 1)}>
Count: {count} (doubled: {doubled})
</button>
);
}