gitmyhub

jotai

TypeScript ★ 21k updated 9d ago

👻 Primitive and flexible state management for React

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.

TypeScriptReactsetup: easycomplexity 2/5

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.

Where it fits