explaingit

pmndrs/jotai

Analysis updated 2026-06-21

21,146TypeScriptAudience · developerComplexity · 2/5Setup · easy

TLDR

A tiny (~2 KB) React state management library built around atoms, small, composable pieces of state that any component can read and update, with support for derived values and async data fetching.

Mindmap

mindmap
  root((jotai))
    What it does
      React state management
      Atom-based state
      Derived and async state
    Tech Stack
      TypeScript
      React
    Use Cases
      Shared component state
      Derived computed values
      Async data fetching
    Audience
      React developers
      Frontend engineers
    API
      useAtom hook
      Derived atoms
      Async atoms
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Replace scattered useState calls across multiple components with shared Jotai atoms so every component reads from one source of truth.

USE CASE 2

Create a derived atom that computes a filtered or transformed list from a raw data atom and updates automatically when the source changes.

USE CASE 3

Manage async data fetching with a Jotai async atom that works with React Suspense, replacing useEffect and useState boilerplate.

USE CASE 4

Build form state in a React app by creating one atom per field and a derived atom that validates the full form.

What is it built with?

TypeScriptReact

How does it compare?

pmndrs/jotaiaidenybai/react-scanteableio/teable
Stars21,14621,20621,210
LanguageTypeScriptTypeScriptTypeScript
Setup difficultyeasyeasyhard
Complexity2/52/54/5
Audiencedeveloperdeveloperpm founder

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 5min

In plain English

Jotai is a small state-management library for React. State management is the part of a frontend app that keeps track of values that change over time, counters, form fields, lists, results from a network call, and makes sure the right pieces of the screen update when those values change. React already has a built-in useState hook for this, but it lives inside a single component, once many components across your app need to share or derive values from the same state, you usually reach for a library. Jotai is one of those libraries, and it advertises itself as scaling from a "simple useState replacement" up to an enterprise TypeScript application. The core is described as around 2kb. The central idea is the "atom". An atom is a small piece of state with an initial value, which can be a string, number, object, or array. You create as many atoms as you like, then use a useAtom hook in any component to read and update one, it feels almost exactly like useState. From there, atoms compose: you can define a derived atom whose value is computed from other atoms by passing a read function, and the derived atom automatically updates when its sources change. Derived atoms can be read-only, writable, or async (returning a promise via fetch, working with Suspense), and you can create write-only atoms that act like actions. Unlike Recoil, Jotai uses no string keys to identify state. You would pick Jotai when you want shared, derivable state across a React app without the boilerplate of a larger store, and you prefer a small, primitive API over a global tree. It is published as the npm package "jotai", written in TypeScript, and targets React.

Copy-paste prompts

Prompt 1
I have a React app with a shopping cart that multiple components need to read and update. Show me how to model the cart as a Jotai atom and use it in a cart icon component and a checkout page.
Prompt 2
Using Jotai, create a derived atom that takes a list of todo items and returns only the uncompleted ones, and show me how to use it in a component.
Prompt 3
I want to fetch user data from an API using Jotai and show a loading spinner with React Suspense while it loads. Show me how to set up an async Jotai atom for this.
Prompt 4
What is the difference between atom, atomWithReducer, and a writable derived atom in Jotai? Give me a concrete example of when I would choose each one.

Frequently asked questions

What is jotai?

A tiny (~2 KB) React state management library built around atoms, small, composable pieces of state that any component can read and update, with support for derived values and async data fetching.

What language is jotai written in?

Mainly TypeScript. The stack also includes TypeScript, React.

How hard is jotai to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is jotai for?

Mainly developer.

Open on GitHub → Explain another repo

This repo across BitVibe Labs

Scan in gitsafehub Deploy in gitdeployhub pmndrs on gitmyhub

Verify against the repo before relying on details.