JotaiJotai

状態
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

Installation

npm install jotai or yarn add jotai

Basics

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

ConceptsPrimitivesComparisonShowcase

Guides

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

AsyncTypeScriptDebuggingPersistenceNext.jsReact NativeResettableAtoms in atomTestingViteCore InternalsComposing atomsInitializing Atom State on Render

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 plugins.

CoreDevtoolsBabel

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.

atomFamilyatomWithDefaultatomWithHashatomWithObservableatomWithReduceratomWithResetatomWithStoragefreezeAtomCreatorfreezeAtomloadableRESETselectAtomsplitAtomuseAtomCallbackuseHydrateAtomsuseReducerAtomuseResetAtomwaitForAll

Integrations

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

ImmerOpticsQueryXStateValtioZustandReduxURQL

Advanced recipes

These recipes can help with more advanced patterns.

Large objectsAtom creatorsCustom useAtom hooks
GitHubnpm