jotai

Primitive and flexible atomic state management for React — derive state from atoms without a centralized store.

jotai

React

Primitive and flexible atomic state management for React — derive state from atoms without a centralized store.

npm GitHub Docs

Fit

Bundle (gzip)

4.1 kB

9.6 kB raw

Install size includes transitive dependencies. Bundle size is gzipped browser payload.

Freshness

The Problem

Global state libraries require you to define all state upfront in a single store. When state needs to be derived, combined, or scoped to subtrees, this gets complicated fast.

What It Does

Jotai models state as atoms — tiny independent units that can be composed and derived from one another. Components subscribe to only the atoms they use, and derived atoms update automatically. It integrates naturally with React Suspense and concurrent features.

Installation

bash

npm install jotai

Usage Example

tsx

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 (
    <div>
      <p>Count: {count}, Double: {double}</p>
      <button onClick={() => setCount((c) => c + 1)}>Increment</button>
    </div>
  );
}

Related packages

cmdkReact

Fast, composable command palette for React — keyboard-driven search UI with fuzzy filtering and accessible markup out of the box.

@dnd-kit/coreReact

Modern, accessible drag-and-drop toolkit for React — fully customizable with keyboard support, collision detection, and zero dependencies.

embla-carousel-reactReact

Lightweight, extensible carousel library for React — smooth scrolling, touch/mouse drag, and full CSS control without prescribing markup.

flagsReact

Provider-agnostic feature flags SDK for Next.js and React — toggle features without redeploying.

framer-motionReact

Production-ready declarative animation library for React — gestures, layout animations, and scroll-driven effects with a clean API.