📦
State Management2M+/wkMIT

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
npm install jotai
yarn
yarn add jotai
pnpm
pnpm add jotai

Import

ESM
import { atom, useAtom } from 'jotai';

Quick Example

usage
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

Packagejotai
CategoryState Management
Weekly Downloads2M+
LicenseMIT
Installnpm install jotai

Related Packages

Browse npm Packages by Category

Explore our reference of 200 popular npm packages with install commands, examples, and quick-start guides.