Jotai

状態

Primitive and flexible state management for React

Introduction

Welcome to the Jotai documentation! Jotai is a primitive and flexible state management library for React. It takes a bottom-up approach with an atomic model inspired by Recoil.

Features

Minimal API
TypeScript oriented
Tiny bundle size (3kb)
Many extra utils and official integrations
Supports Next.js and React Native

Basics

Learn the basic concepts and primitives of the library, discover how it compares with other solutions, and see examples of it in use.

Concepts Comparison Showcase

Guides

These guides can help with common use cases such as async behavior, TypeScript, and Next.js.

Async TypeScript Debugging Persistence Next.js React Native Resettable Atoms in atom Testing Vite Core Internals Composing atoms Initializing Atom State on Render Performance Migrating to Jotai v2 API

Jotai has a very minimal API, exposing only a few exports from the main jotai bundle. Each is explained in more detail in the Core doc. Jotai also has a nice devtool for debugging and a few helpful Babel and SWC plugins.

Core Devtools Babel SWC

Utilities

Jotai also includes a jotai/utils bundle with a variety of extra utility functions. One example is atomWithStorage, which includes localStorage persistence and browser tab synchronization.

abortableAtom atomFamily atomWithDefault atomWithHash atomWithReducer atomWithObservable atomWithReset atomWithStorage freezeAtomCreator freezeAtom loadable RESET splitAtom useAtomCallback useHydrateAtoms useReducerAtom useResetAtom waitForAll selectAtom

Integrations

Jotai has separate bundles for many official integrations including atomWithQuery for React Query and atomWithMachine for XState, among many others.

Immer Optics TanStack Query XState Valtio Zustand Redux URQL Location tRPC Molecules Relay Cache

Advanced recipes

These recipes can help with more advanced patterns.

Large objects Atom creators Custom useAtom hooks

JotaiJotai

Introduction

Jotai