Derived Atoms and Async 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.

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.

A writable derived atom has both a getter and a setter: atom(get => get(baseAtom).toUpperCase(), (get, set, newValue) => set(baseAtom, newValue.toLowerCase())). Reading gives the transformed value; writing transforms and stores back.

This pattern implements two-way data transformation without exposing the base atom directly.

The getter function can be async: const userAtom = atom(async get => { const id = get(userIdAtom); return await fetchUser(id); }). Jotai accepts Promises from atom getters natively.

When userIdAtom changes, Jotai automatically re-runs the async getter and the consuming component suspends during the fetch.

Async atoms integrate seamlessly with React Suspense. Wrap the consuming component in a Suspense boundary with a fallback. The component suspends while the Promise is pending and renders when it resolves.

This eliminates manual loading state management in the component: no isLoading flag, no useEffect for data fetching.

Import loadable from jotai/utils. Wrap an async atom: const loadableUserAtom = loadable(userAtom). Components reading loadableUserAtom receive {state: 'loading'}, {state: 'hasData', data: user}, or {state: 'hasError', error} without suspending.

Use loadable when you need to render a custom loading state inline rather than relying on a Suspense boundary.

The atomWithReset utility from jotai/utils creates an atom that can be reset to its initial value using the RESET symbol. This is cleaner than manually tracking and re-applying the initial value.

In forms, reset all field atoms on submit or cancel by calling each setter with RESET in a single handler.

A derived atom can read from multiple other atoms: const summaryAtom = atom(get => ({ user: get(userAtom), settings: get(settingsAtom), count: get(countAtom) })). This creates a single stable reference that updates when any dependency changes.

Components that only need the summary subscribe to summaryAtom rather than all three individual atoms.

Derived atoms can conditionally read different atoms: const activeDataAtom = atom(get => get(modeAtom) === 'A' ? get(dataAAtom) : get(dataBAtom)). When modeAtom switches, the derived atom switches its data source automatically.

Jotai re-subscribes to the correct atom on each evaluation, ensuring no stale data from the inactive branch.

If an async atom's getter throws or rejects, the error propagates to the nearest React error boundary when used with Suspense. With loadable, the error appears in the state.error field for inline handling.

Always pair async atoms with either an ErrorBoundary or a loadable wrapper in production code.

Derived atoms memoize their last result. If all dependency atoms return the same values as the previous evaluation, the derived atom returns the same reference and no downstream re-renders occur.

For expensive derivations (large array transforms), this memoization provides significant performance benefits without any additional configuration.

What happens to a component reading an async atom while its Promise is pending?

Derived atoms compute values from other atoms using getter functions with automatic dependency tracking. Async atoms use async getters and integrate with React Suspense by default; use loadable from jotai/utils to opt out and handle loading/error states inline.

Writable derived atoms enable two-way transformations, and conditional atoms dynamically switch data sources based on other atom values.