Jotai Derived Atoms: Computed State from Other Atoms

Why it exists

To avoid manual state synchronization. In complex apps, many pieces of state are based on other state, like a form's validity depending on its inputs. Derived atoms let you declare these relationships, letting Jotai manage updates instead of you writing imperative useEffect logic.

The mental model

A derived atom is a computed property for your global state. It doesn't hold its own independent value; instead, it runs a function to calculate its value whenever one of its dependencies changes. Think of a totalPriceAtom that automatically recalculates when item1PriceAtom or item2PriceAtom is updated.

How it works

You create a derived atom by passing a read function to atom(). This function receives a get argument. You use get(someOtherAtom) to read a dependency's value, and Jotai tracks this dependency. When a dependency changes, Jotai re-runs your read function. You can also provide an optional second write function to allow setting the derived atom, which in turn updates the underlying source atoms. For example, setting a fullNameAtom could update firstNameAtom and lastNameAtom.

When to use it

Use derived atoms for any state that is a pure function of other state. Common cases include: calculating a shopping cart total from item atoms, filtering a list based on a search query atom, determining if a form is valid based on its input field atoms, or combining a first name and last name into a full name.

When not to use it

Do not use derived atoms for values that are truly independent pieces of state. If a value needs to be set directly and doesn't depend on anything else, use a primitive atom: atom(initialValue). Also, avoid creating complex, deeply nested chains of derived atoms, as they can make debugging difficult to trace.

One canonical example

A read-write derived atom for temperature conversion. A celsiusAtom holds the source value. A fahrenheitAtom is derived from it, but can also be written to, which then updates the original celsiusAtom.

const celsiusAtom = atom(0);
const fahrenheitAtom = atom(
(get) => get(celsiusAtom) * 9/5 + 32,
(get, set, newFahrenheit) => {
set(celsiusAtom, (newFahrenheit - 32) * 5/9);
}
);

Updating fahrenheitAtom to 212 will automatically update celsiusAtom to 100, and vice versa.