explaingit

pmndrs/jotai

📈 Trending★ 21,146TypeScriptAudience · developerComplexity · 2/5ActiveLicenseSetup · easy

TLDR

Jotai is a lightweight state management library for React that uses atoms, small, independent pieces of state, to manage data across your app without boilerplate.

Mindmap

mindmap
  root((Jotai))
    What it does
      Atomic state management
      Derived atoms
      Async data fetching
    How it works
      Atoms hold state
      Components read/write atoms
      Auto-updates on change
    Use cases
      Simple app state
      Complex enterprise apps
      Server data sync
    Tech stack
      React
      TypeScript
      JavaScript

Things people build with this

USE CASE 1

Build a React app with shared state across components without Redux boilerplate.

USE CASE 2

Create derived atoms that automatically compute values from other atoms and update the UI.

USE CASE 3

Fetch data from a server asynchronously and display it in your React components.

USE CASE 4

Scale from a simple app with a few atoms to a large enterprise application with complex state logic.

Tech stack

ReactTypeScriptJavaScript

Getting it running

Difficulty · easy Time to first run · 5min
Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

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
Show me how to set up Jotai atoms for a todo app with add, delete, and filter functionality.
Prompt 2
How do I create a derived atom in Jotai that computes the sum of values from multiple other atoms?
Prompt 3
Write a Jotai example that fetches user data from an API and displays it in a React component.
Prompt 4
How do I use Jotai to manage form state across multiple components without prop drilling?
Prompt 5
Show me how to persist Jotai atoms to localStorage so state survives page refreshes.
Open on GitHub → Explain another repo

Generated 2026-05-21 · Model: sonnet-4-6 · Verify against the repo before relying on details.