Jotai: Thinking About State as Small Independent Pieces

State management in React has evolved through several different philosophies.

Early React applications often relied on centralized stores like Redux, where all application state lived inside a single global store. While this approach made state predictable, it also meant that many unrelated pieces of state ended up living together in one large structure.

More recent libraries began exploring a different idea: instead of one large store, what if state could be broken down into small independent pieces?

This is the core idea behind Jotai.

State as Atoms

Jotai models state using the concept of atoms.

An atom represents the smallest unit of state in the application. Instead of placing all values in a global store, each piece of state can exist independently.

import { atom } from "jotai"

const countAtom = atom(0)

This atom behaves very similarly to useState, but it is not tied to a specific component. Any component can read or update the atom.

Using Atoms Inside Components

Components interact with atoms through the useAtom hook.

import { useAtom } from "jotai"

function Counter() {
  const [count, setCount] = useAtom(countAtom)

  return (
    <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  )
}

The API intentionally feels very close to React’s built-in state hooks. This makes atoms easy to understand because they follow a familiar pattern.

The difference is that the state is no longer confined to a single component. It can now be shared anywhere in the application.

Derived State with Atoms

One of the most interesting features of Jotai is the ability to create atoms that depend on other atoms.

const doubleAtom = atom((get) => get(countAtom) * 2)

Here, doubleAtom derives its value from countAtom.

Whenever countAtom changes, the derived atom updates automatically. This creates a dependency graph where pieces of state react to each other without requiring manual synchronization.

State as a Dependency Graph

This idea leads to a very different mental model compared to traditional state stores.

Instead of thinking about state as a single centralized object, Jotai treats state as a graph of relationships between atoms.

countAtom → doubleAtom

Each atom represents a node in the graph, and derived atoms depend on other nodes.

When one atom changes, only the parts of the UI that depend on that atom update.

A Different Approach from Global Stores

Many state management libraries focus on creating a global store that holds all application state.

Jotai intentionally avoids that structure.

Instead of organizing state around a single store, it encourages developers to compose state from many small atoms.

This makes it easier to keep state modular and prevents unrelated pieces of state from becoming tightly coupled.

Where Jotai Fits in Modern React

The modern React ecosystem has moved toward separating different types of state.

Local component state often uses useState.

Server state is frequently handled by libraries like TanStack Query.

Shared client-side state can be managed by tools such as Zustand, MobX, or Jotai.

Within that landscape, Jotai stands out because it models state as a collection of small building blocks rather than a centralized structure.

A Shift in Perspective

Jotai encourages developers to think about state differently.

Instead of building large stores and organizing state around reducers or actions, it becomes possible to compose state from simple units that depend on each other.

The result is a system where state grows organically as the application grows.

And rather than forcing all state through a single pipeline, the application becomes a network of small reactive pieces working together.