Atomic State (Jotai)

Move from a top-down monolithic store to bottom-up, granular atomic state.

State Management6 min readConcept 19 of 22

What is an Atom?

In Jotai, an 'atom' is an immutable configuration object that defines a piece of state. It does not hold the state value directly; rather, it acts as a unique reference key used by the Jotai Store to track the runtime value.

Atoms are the minimal, granular building blocks of state. Instead of defining one massive global object, you define tiny, independent atoms (userAtom, themeAtom) exactly where you need them.

Top-Down vs Bottom-Up

Monolithic stores (Redux, Zustand) are Top-Down. You define a giant state tree upfront and write selector functions to slice data downward into your components.

Atomic state is Bottom-Up. You create small atoms and compose them upward. State scales dynamically and naturally with your component structure.

Granular Reactivity

Because each atom is its own isolated slice, subscribing to an atom via useAtom() guarantees perfect render optimization without writing any selector boilerplate.

If Component A subscribes to themeAtom and Component B subscribes to cartAtom, updating the cart will mathematically never trigger a re-render in Component A.

Infographic: Top-Down vs Bottom-Up

Review the diagram below comparing the data flow of a monolithic store against granular atoms.

// TOP-DOWN (Zustand) const useStore = create((set) => ({ user: 'Alice', theme: 'dark', cart: [], })) // Component must select to avoid re-renders const theme = useStore((state) => state.theme); // BOTTOM-UP (Jotai) const userAtom = atom('Alice'); const themeAtom = atom('dark'); const cartAtom = atom([]); // Component automatically gets granular reactivity const [theme] = useAtom(themeAtom);
Top-Down Monolith
Global Store
user
theme
cart
<A/>
<B/>
<C/>
Requires selectors to slice data out of the monolith.
Bottom-Up Atoms
user
theme
cart
<A/>
<B/>
<C/>
Components subscribe directly to specific atoms. Granular by default.

Atomic state completely eliminates selector functions by breaking the global monolithic store into tiny, isolated primitives.

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1What is the fundamental architectural difference between a monolithic store (Zustand) and atomic state (Jotai)?

Remember this

  • An atom is an immutable configuration object, not a mutable data container.
  • Atomic state is a Bottom-Up architecture, contrary to the Top-Down monolith.
  • Subscribing to a specific atom guarantees you will never re-render from unrelated state changes.
  • Atoms act as their own minimal selectors, eliminating boilerplate.

Done with this concept?

Mark it complete to track your progress. No login needed.