Le modèle d'état atomique (Jotai, Recoil) construit l'état global à partir de nombreuses petites unités indépendantes appelées atoms, composées de bas en haut — plutôt qu'un grand store top-down unique (Redux) ou un contexte monolithique. Les composants s'abonnent à des atoms individuels et ne se re-rendent que lorsque ceux-ci changent.
Atoms — les plus petites unités d'état
import { atom, useAtom } from "jotai";
const countAtom = atom(0); // a primitive atom — one piece of state
const nameAtom = atom("Ann"); // another, independent
Chaque atom est un morceau d'état autonome. Vous en créez autant que vous en avez besoin, chacun adressable individuellement.
Atoms dérivés — composition
// a derived atom computes from other atoms; recomputes when its dependencies change
const doubleAtom = atom((get) => get(countAtom) * 2);
const greetingAtom = atom((get) => `Hello, ${get(nameAtom)}`);
// writable derived atom
const upperNameAtom = atom(
(get) => get(nameAtom).toUpperCase(),
(get, set, newVal) => set(nameAtom, newVal.toLowerCase()),
);
Les atoms se composent en un graphe de dépendances — les atoms dérivés se mettent à jour automatiquement quand les atoms qu'ils lisent changent, comme une feuille de calcul.
Utiliser les atoms — se sent comme useState, mais global
function Counter() {
const [count, setCount] = useAtom(countAtom); // global, but useState-like API
return <button onClick={() => setCount(count + 1)}>{count}</button>;
}
function Display() {
const [double] = useAtom(doubleAtom); // re-renders ONLY when doubleAtom changes
}
Atomique (bottom-up) vs store (top-down)
Redux (top-down): one big state tree; you carve slices/selectors OUT of it
Atomic (bottom-up): start with tiny atoms; compose them UP into derived state
Granularity: each atom is independently subscribable → naturally fine-grained
re-renders (a component using countAtom ignores nameAtom changes)
Avantages et compromis
✓ Fine-grained re-renders by default (subscribe to exactly the atoms you use)
✓ No selector boilerplate; derived state is just another atom
✓ Solves Context's "re-render everything" problem
✓ Great for state that's naturally decomposed into many independent pieces
✗ Many atoms can be harder to organize/trace than one centralized store
✗ Less rigid structure than Redux (a pro or con depending on the team)
Pourquoi c'est important
Le modèle atomique est une approche distincte et de plus en plus populaire de l'état global qui inverse la structure top-down de Redux : au lieu de découper un grand store, vous composez de petits atoms vers le haut.
Sa granularité intégrée offre des re-rendus efficients et ciblés sans sélecteurs — adressant directement les problèmes de performance du Context.
Comprendre les atoms (et les atoms dérivés) complète votre connaissance de l'espace de conception de la gestion d'état, aux côtés des modèles single-store (Redux/Zustand) et réactifs (MobX/Signals), vous aidant à choisir le paradigme qui convient le mieux à la forme d'état d'une application.