0PricingLogin
React Academy · Lesson

Derived Atoms and Async Atoms

Compose derived atoms from other atoms and create async atoms that integrate with Suspense.

Read-Only Derived Atoms

Create a derived atom by passing a getter function: const doubleAtom = atom(get => get(countAtom) * 2). This atom has no stored value; it recomputes whenever countAtom changes.

Derived atoms are always up-to-date without any manual synchronization. They are the Jotai equivalent of computed properties.

Automatic Dependency Tracking

Jotai tracks which atoms were accessed inside the getter function and automatically re-evaluates the derived atom when any of them change. You do not declare dependencies explicitly.

If the getter calls get(atomA) and get(atomB), the derived atom updates whenever either atomA or atomB changes.

All lessons in this course

  1. Atoms: The Unit of State in Jotai
  2. Reading and Writing Atoms with useAtom
  3. Derived Atoms and Async Atoms
  4. Jotai vs Zustand vs Context: When to Use Which
← Back to React Academy