Atomic State Management with Jotai and Recoil0%
Event-Driven State and Finite State Machines with XState

Atomic State Management with Jotai and Recoil

Beginner12 min read•Updated: Jul 11, 2026
Study MaterialsCheatsheet

Atomic State Management with Jotai and Recoil

1. The Limitations of Monolithic State Stores

In traditional Redux or large Context providers, state is modeled as a single, massive centralized tree.

While centralized trees provide structure, they have significant drawbacks:

  1. 1
    Top-Down Coupling: Components must know the shape of the global state tree.
  2. 2
    Context Re-render Cascades: If the tree updates, consumers can easily re-render without careful memoization.
  3. 3
    Code Splitting Friction: Adding state slices to a centralized store dynamically as code chunks load requires complex store enhancers.

The Atomic State Management Pattern (pioneered by Recoil at Meta and perfected by Jotai) re-imagines state as a distributed collection of tiny, independent, reactive units called Atoms.

Output
Monolithic Store (Redux / Context):
[Global Store Tree: { users: [...], cart: [...], theme: 'dark', settings: {...} }]
 
Atomic Architecture (Jotai):
[atom: theme] [atom: cart] [atom: search] [atom: derived: cartTotal]
(Components subscribe strictly to individual atoms; zero re-renders elsewhere!)

2. Introducing Jotai ("State" in Japanese)

Jotai has become the leading modern atomic library for React:

  • Bottom-Up Composition: State is assembled from tiny atoms.
  • Minimalist API: Modeled after React's familiar useState.
  • Tiny Size: Under 3 KB minified.
  • Zero Providers Required: Works out of the box with an implicit global store.
Bash / Terminal
npm install jotai

3. Creating and Using Primitive Atoms

An atom is defined outside of any component:

JavaScript
// src/store/atoms.js
import { atom } from 'jotai';
 
// Primitive atoms
export const themeAtom = atom('dark');
export const countAtom = atom(0);
export const cartItemsAtom = atom([]);

In your React components, consume atoms with useAtom:

JSX
import React from 'react';
import { useAtom } from 'jotai';
import { countAtom } from './atoms';
 
export default function Counter() {
// useAtom behaves identically to useState!
const [count, setCount] = useAtom(countAtom);
 
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(c => c + 1)}>Increment</button>
</div>
);
}

4. Derived Atoms (Selectors)

One of Jotai's most elegant features is Derived Atoms. An atom can read other atoms using get(), computing derived values automatically:

JavaScript
// src/store/atoms.js
import { atom } from 'jotai';
 
export const cartItemsAtom = atom([
{ id: 1, name: 'React Mastery', price: 99 },
{ id: 2, name: 'Django REST API', price: 79 }
]);
 
// Read-only derived atom (recomputes ONLY when cartItemsAtom updates!)
export const cartTotalAtom = atom((get) => {
const items = get(cartItemsAtom);
return items.reduce((sum, item) => sum + item.price, 0);
});
JSX
import { useAtomValue } from 'jotai';
import { cartTotalAtom } from './atoms';
 
export function CartSummary() {
// useAtomValue only reads state without needing an updater function
const total = useAtomValue(cartTotalAtom);
 
return <div>Total Investment: ${total}</div>;
}

5. Architectural Benefits of Atoms

  • Zero Render Leaks: Only components reading an updated atom re-render. Unrelated components are completely unaffected.
  • Effortless Code Splitting: Atoms are plain variables in module files. They can be dynamically imported alongside components on demand without modifying a centralized store.
Interactive Quiz

Practice Quiz

Question 1
What is the core philosophy behind Atomic State Management (Jotai/Recoil)?
Question 2
How does the consumption of an atom using useAtom resemble native React?
Question 3
What is a "Derived Atom" in Jotai?
Question 4
If Component A updates countAtom and Component B subscribes only to themeAtom, does Component B re-render?
Question 5
What hook is used when a component only needs to read an atom's value without updating it?
Next Lesson

Event-Driven State and Finite State Machines with XState

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous LessonNext Lesson
RTK Query for Enterprise Data FetchingEvent-Driven State and Finite State Machines with XState

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousNext
PrevNext