Jotai from Beginner to Expert: A Learning Path

Introduction to Jotai

Jotai (Japanese for "state") is a primitive and flexible state management library for React. It takes an atomic approach: state is split into small, independent pieces called atoms, and components can read or write them directly. Unlike Redux or Zustand, there’s no central store, no reducers, and no boilerplate. You define atoms, use them in components, and compose them to derive new state. The result is a minimal API surface, excellent TypeScript support, and seamless React Concurrent Mode compatibility.

Why Jotai Matters

• Minimal mental overhead: You create an atom, read it, set it. That's it.
• Automatic dependency tracking: Derived atoms re-evaluate only when their dependencies change, eliminating unnecessary renders.
• Composable and scalable: Atoms can be combined like Lego bricks to form complex state graphs without monolithic stores.
• First-class async support: Suspense and ErrorBoundary integrate naturally for loading and error states.
• Zero configuration: No context providers needed for basic usage; the default store works globally.

Getting Started: The Basics

Install Jotai from your package manager:

npm install jotai
# or
yarn add jotai

Your First Atom

An atom represents a piece of state. Create one with atom(initialValue). To read and write it inside a component, use the useAtom hook, which returns a tuple just like useState.

import { atom, useAtom } from 'jotai';

const counterAtom = atom(0);

function Counter() {
  const [count, setCount] = useAtom(counterAtom);
  return (
    

      
Count: {count}
       setCount(count + 1)}>Increment
    
  );
}

Derived Atoms

Atoms can depend on other atoms. A derived atom is defined by passing a read function (and optionally a write function) to atom(). The read function receives get, which can read other atoms, and the write function receives get and set.

• Read-only derived atom: Only a read function.
• Write-only atom: Only a write function (often used for actions).
• Read-write atom: Both read and write.

// Read-only: doubles the counter
const doubleCountAtom = atom((get) => get(counterAtom) * 2);

// Component using read-only atom
function DoubleDisplay() {
  const [doubleCount] = useAtom(doubleCountAtom); // only reads
  return 
Double: {doubleCount}
;
}

// Write-only: increments the counter by a specific amount
const incrementByAtom = atom(null, (get, set, amount: number) => {
  set(counterAtom, get(counterAtom) + amount);
});

function IncrementButton({ amount }: { amount: number }) {
  const [, increment] = useAtom(incrementByAtom);
  return  increment(amount)}>+{amount};
}

// Read-write: a controlled input that syncs with a local atom but also updates a parent atom
const textAtom = atom('');

const uppercaseAtom = atom(
  (get) => get(textAtom).toUpperCase(),
  (get, set, newValue: string) => set(textAtom, newValue.toLowerCase())
);

Understanding Atoms in Depth

Atom Configuration

The atom function can accept:

• A single value → primitive atom.
• A read function (get) => value → derived read-only atom.
• A read function and a write function → read-write atom.
• An object with read and write properties (legacy syntax).

Inside the write function, you have access to set, which can update any atom. The third argument is the value passed when calling the setter. You can also get to read the current value of any atom, including the atom being written, to support updater patterns.

const countAtom = atom(1);

const incrementAtom = atom(null, (get, set) => {
  set(countAtom, (prev) => prev + 1);
});

Async Atoms and Suspense

Derived atoms can return promises. When a component reads an async atom, React's Suspense will catch the promise and show a fallback until it resolves. This eliminates manual loading state management.

const userIdAtom = atom(1);

const userAtom = atom(async (get) => {
  const id = get(userIdAtom);
  const response = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
  return response.json();
});

function UserProfile() {
  const [user] = useAtom(userAtom);
  return 
{user.name} — {user.email}
;
}

// Wrap with Suspense
function App() {
  return (
    Loading user...