JotaiJotai

状態
Primitive and flexible state management for React

Introduction

Welcome to the Jotai v2 documentation! Jotai's atomic approach to global React state management scales from a simple useState replacement to an enterprise application with complex requirements.

Features

  • Minimal core API (2kb)
  • Many utilities and integrations
  • TypeScript oriented
  • Works with Next.js, Gatsby, Remix, and React Native
  • React Fast Refresh with SWC and Babel plugins

Core

Jotai has a very minimal API, exposing only a few exports from the main jotai bundle. They are split into four categories below.

atomuseAtomStoreProvider

Utilities

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

StorageSSRAsyncResettableFamily

Integrations

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

tRPCQueryURQLImmerXStateLocationCacheMoleculesOptics

Tools

There are also SWC and Babel compiler plugins for React Fast Refresh support and debugging labels. This creates the best developer experience when using Jotai with a React framework such as Next.js or Gatsby.

SWCBabelDevtools

Basics

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

ConceptsComparisonShowcase

Guides

These guides can help with use common cases such as TypeScript, React frameworks, and basic patterns.

v2 API migrationTypeScriptNext.jsGatsbyRemixReact NativeDebuggingPerformanceTestingCore internalsComposing atomsAtoms in atomInitializing state on renderPersistence

Recipes

These recipes can help with more advanced patterns.

Large objectsCustom useAtom hooksatomWithToggleatomWithToggleAndStorageatomWithCompareatomWithRefreshAndDefaultatomWithListenersatomWithBroadcastatomWithDebounce