Jotai

Jotai is a primitive and flexible state management library for React built around atoms — small, composable units of state that you read and write with hooks that feel just like useState. Instead of a single global store with string keys, you declare independent atoms and derive new atoms from them, and Jotai handles dependency tracking, re-render optimization, and async resolution for you.

With a minimal 2KB core, a rich set of utilities, and first-class TypeScript support, Jotai scales from replacing a handful of useState calls up to managing complex, interdependent global state in large applications. It works with React, React Native, and any renderer, and supports Suspense-based async atoms out of the box.

What You Get

• A 2KB core API centered on the atom() primitive and the useAtom family of hooks
• Derived read-only, write-only, and read-write atoms with automatic dependency tracking
• Built-in async atoms that integrate with React Suspense for data fetching and pending states
• A large utility set (atomWithStorage, atomFamily, selectAtom, splitAtom, loadable, and more) plus vanilla and Babel integrations
• First-class TypeScript types and support for React, React Native, and custom stores

Common Use Cases

• Replacing scattered useState and prop drilling with shared global atoms
• Deriving computed values and cross-cutting selectors from multiple pieces of state
• Fetching and caching server data through async atoms with Suspense
• Persisting UI state such as theme or preferences to localStorage with atomWithStorage
• Managing dynamic collections of state with atomFamily and splitAtom

Under The Hood

Architecture — Jotai is organized into a framework-agnostic vanilla layer and a thin react binding layer. The vanilla core (src/vanilla/atom.ts, src/vanilla/store.ts, src/vanilla/internals.ts) defines the atom config object and a store that holds atom state in a WeakMap-based graph, tracking dependencies and recomputing derived atoms via INTERNAL_buildStore. atom() returns a plain config with read/write functions rather than the value itself, so atoms are stateless descriptors and all mutable state lives in the store. The React layer (src/react/useAtom.ts, useAtomValue.ts, useSetAtom.ts, Provider.ts) subscribes components to specific atoms through useSyncExternalStore, so a store change re-renders only the components reading the affected atoms. A default global store is created lazily, with a dev-mode guard warning on multiple Jotai instances.

Tech Stack — Written in TypeScript (~85% of the codebase) with a small JavaScript/CSS remainder. React is an optional peer dependency (>=17.0.0), as are @babel/core, @babel/template, and @types/react, keeping the runtime dependency-free. The build uses Rollup with multiple configs to emit CommonJS and ESM bundles plus separate entry points for vanilla, utils, and Babel plugins/preset, with downlevel-dts producing TypeScript 3.8 type fallbacks. Tooling includes Vitest for tests, ESLint, Prettier, and pnpm workspaces.

Code Quality — The codebase is mature and well-tested, with 49 test files under tests/ covering vanilla store behavior, dependency tracking, derivation, effects, React hooks, and the Babel plugins, run through Vitest with Testing Library and v8 coverage. Files are small and single-responsibility (each utility such as atomWithStorage, atomFamily, and selectAtom lives in its own module under src/vanilla/utils). Internal-only APIs are clearly marked with comments warning they are not part of the public contract, and types are strict throughout.

API Design — The public surface is deliberately minimal: one atom() factory plus a small family of hooks (useAtom, useAtomValue, useSetAtom) that mirror React.useState, so getting started requires almost no boilerplate. Atoms are referenced by identity rather than string keys, eliminating a whole class of naming errors. Read/write/derived variants are expressed by which functions you pass to atom(), a consistent and composable convention, and the extensive documentation at jotai.org plus in-repo examples make the learning curve gentle for anyone already comfortable with React hooks.