Jotai — Primitive and Flexible State Management for React

What it is

Jotai is an atomic state management library for React. Instead of a single global store, you define independent atoms that hold pieces of state. Components subscribe to only the atoms they use, so re-renders are minimal. Derived atoms compute values from other atoms, and async atoms handle data fetching -- all with an API as simple as useState.

Jotai targets React developers who find Redux too heavy and Context too limited. It suits applications where fine-grained reactivity and composable state pieces matter more than a centralized store.

How it saves time or tokens

Redux requires slices, reducers, actions, selectors, and middleware for even simple state. Zustand simplifies this but still uses a single store. Jotai eliminates all boilerplate: define an atom, use it in a component with useAtom. Derived state is a function, not a selector library. The mental model is useState that works across components.

How to use

1. Install Jotai: npm install jotai.
2. Define atoms: const countAtom = atom(0) and derived atoms: const doubledAtom = atom((get) => get(countAtom) * 2).
3. Use in components: const [count, setCount] = useAtom(countAtom).

Example

import { atom, useAtom } from 'jotai';

const countAtom = atom(0);
const doubledAtom = atom((get) => get(countAtom) * 2);

function Counter() {
  const [count, setCount] = useAtom(countAtom);
  const [doubled] = useAtom(doubledAtom);
  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>
        Count: {count}, Doubled: {doubled}
      </button>
    </div>
  );
}

Related on TokRepo

• Coding Tools -- Frontend state management libraries
• Automation Tools -- Developer workflow tools

Common pitfalls

• Creating atoms inside component render functions. Atoms should be defined at module scope or memoized. Creating them during render causes infinite re-renders.
• Not using Provider when you need isolated state trees (e.g., in tests or micro-frontends). Without a Provider, all components share the default store.
• Overusing derived atoms for simple transformations that could be done inline. Atoms add subscription overhead, so only extract derived atoms when multiple components need the same computation.