Zustand et Jotai : La Nouvelle Génération de State Management pour React
Salut HaWkers, êtes-vous fatigué de la complexité de Redux ? Trop de boilerplate, actions, reducers, middlewares - tout cela peut sembler excessif pour de nombreux projets modernes. La bonne nouvelle est qu'une nouvelle génération de bibliothèques de state management a émergé pour simplifier votre vie.
Avez-vous déjà imaginé gérer l'état global de votre application React avec seulement 3-5 lignes de code, sans perdre en performance ou en scalabilité ? Zustand et Jotai révolutionnent la façon dont nous pensons le state management en 2025.
Pourquoi Redux Est-il Resté Derrière ?
Redux était révolutionnaire quand il est apparu en 2015, apportant prévisibilité et patterns clairs au chaos de l'état dans les applications React. Mais le monde a changé, et les besoins des développeurs aussi.
Problèmes courants avec Redux :
- Boilerplate excessif : Actions, action creators, reducers, constants
- Courbe d'apprentissage abrupte : Concepts comme middleware, thunks, sagas
- Verbosité : Beaucoup de lignes de code pour des tâches simples
- DevEx médiocre : Configuration complexe et chronophage
- Bundle size : Redux + Redux Toolkit ajoute ~15-20KB au bundle
Avec l'introduction des React Hooks en 2019, il est devenu clair que nous pouvions avoir des solutions plus simples et idiomatiques. C'est là qu'entrent Zustand et Jotai.
Zustand : Simplicité et Performance Sans Compromis
Zustand (mot allemand pour "état") est une bibliothèque minimaliste de 1KB qui offre une API extrêmement simple sans sacrifier les fonctionnalités.
Installation et Setup Basique
npm install zustand
# ou
yarn add zustandExemple 1 : Store Basique avec Zustand
Créons une store complète pour gérer un panier d'achat :
import { create } from 'zustand';
// Créer la store
const useCartStore = create((set, get) => ({
// État initial
items: [],
totalPrice: 0,
// Actions
addItem: (product) => set((state) => {
const existingItem = state.items.find(item => item.id === product.id);
if (existingItem) {
// Incrémenter la quantité si déjà existant
return {
items: state.items.map(item =>
item.id === product.id
? { ...item, quantity: item.quantity + 1 }
: item
),
totalPrice: state.totalPrice + product.price
};
}
// Ajouter un nouvel item
return {
items: [...state.items, { ...product, quantity: 1 }],
totalPrice: state.totalPrice + product.price
};
}),
removeItem: (productId) => set((state) => {
const item = state.items.find(item => item.id === productId);
if (!item) return state;
return {
items: state.items.filter(item => item.id !== productId),
totalPrice: state.totalPrice - (item.price * item.quantity)
};
}),
clearCart: () => set({ items: [], totalPrice: 0 }),
// Valeur calculée avec get()
getItemCount: () => {
const { items } = get();
return items.reduce((total, item) => total + item.quantity, 0);
}
}));
// Utilisation dans un composant
function ShoppingCart() {
const { items, totalPrice, removeItem, clearCart, getItemCount } = useCartStore();
return (
<div>
<h2>Panier ({getItemCount()} articles)</h2>
{items.map(item => (
<div key={item.id}>
<span>{item.name} - Qté: {item.quantity}</span>
<button onClick={() => removeItem(item.id)}>Supprimer</button>
</div>
))}
<p>Total: ${totalPrice.toFixed(2)}</p>
<button onClick={clearCart}>Vider le Panier</button>
</div>
);
}Voyez comme c'est simple ! Sans providers, sans reducers complexes, sans action types. Juste une fonction qui retourne votre état et les méthodes pour le modifier.
Exemple 2 : Middleware et Persistance
Zustand supporte des middlewares puissants avec une syntaxe simple :
import { create } from 'zustand';
import { persist, devtools } from 'zustand/middleware';
const useAuthStore = create(
devtools(
persist(
(set, get) => ({
user: null,
token: null,
isAuthenticated: false,
login: async (email, password) => {
try {
const response = await fetch('/api/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ email, password })
});
const data = await response.json();
set({
user: data.user,
token: data.token,
isAuthenticated: true
});
return { success: true };
} catch (error) {
console.error('Login failed:', error);
return { success: false, error: error.message };
}
},
logout: () => set({
user: null,
token: null,
isAuthenticated: false
}),
updateProfile: (updates) => set((state) => ({
user: { ...state.user, ...updates }
}))
}),
{
name: 'auth-storage', // Nom de la clé dans localStorage
partialize: (state) => ({ // Choisir ce qu'on persiste
user: state.user,
token: state.token,
isAuthenticated: state.isAuthenticated
})
}
)
)
);
// Utilisation dans un composant
function UserProfile() {
const { user, logout, updateProfile } = useAuthStore();
if (!user) return <p>Non authentifié</p>;
return (
<div>
<h2>Bienvenue, {user.name}</h2>
<button onClick={logout}>Déconnexion</button>
<button onClick={() => updateProfile({ name: 'Nouveau Nom' })}>
Mettre à jour le Profil
</button>
</div>
);
}Cet exemple montre comment ajouter DevTools (pour debug dans le navigateur) et persistance (sauvegarder dans localStorage) avec seulement quelques lignes.
Jotai : Atomic State Management Inspiré de Recoil
Jotai (mot japonais pour "état") adopte une approche différente : au lieu d'une store centralisée, vous travaillez avec des "atomes" - de petites unités d'état qui peuvent être composées.
Installation et Setup
npm install jotai
# ou
yarn add jotaiExemple 3 : Atoms Basiques avec Jotai
import { atom, useAtom } from 'jotai';
// Définir les atoms (unités d'état)
const countAtom = atom(0);
const textAtom = atom('bonjour');
const userAtom = atom({ name: 'Jeff', role: 'developer' });
// Atoms dérivés (computed)
const doubleCountAtom = atom(
(get) => get(countAtom) * 2
);
const uppercaseTextAtom = atom(
(get) => get(textAtom).toUpperCase()
);
// Atom avec logique de read et write personnalisée
const incrementAtom = atom(
(get) => get(countAtom), // read
(get, set, incrementBy) => set(countAtom, get(countAtom) + incrementBy) // write
);
// Utilisation dans les composants
function Counter() {
const [count, setCount] = useAtom(countAtom);
const [doubleCount] = useAtom(doubleCountAtom);
const [, increment] = useAtom(incrementAtom);
return (
<div>
<p>Compteur: {count}</p>
<p>Double: {doubleCount}</p>
<button onClick={() => setCount(count + 1)}>+1</button>
<button onClick={() => increment(5)}>+5</button>
<button onClick={() => setCount(0)}>Reset</button>
</div>
);
}
function TextDisplay() {
const [text] = useAtom(textAtom);
const [uppercase] = useAtom(uppercaseTextAtom);
return (
<div>
<p>Original: {text}</p>
<p>Majuscules: {uppercase}</p>
</div>
);
}La beauté de Jotai est que chaque composant ne se re-rend que lorsque les atoms qu'il utilise changent. Granularité parfaite !
Exemple 4 : Atoms Asynchrones pour le Fetching
Jotai rend les opérations asynchrones triviales :
import { atom, useAtom } from 'jotai';
// Atom pour stocker l'ID utilisateur
const userIdAtom = atom(1);
// Atom asynchrone qui fait un fetch basé sur l'ID
const userDataAtom = atom(async (get) => {
const userId = get(userIdAtom);
const response = await fetch(`https://api.example.com/users/${userId}`);
if (!response.ok) {
throw new Error('Failed to fetch user');
}
return response.json();
});
// Atom pour la liste des posts de l'utilisateur
const userPostsAtom = atom(async (get) => {
const userId = get(userIdAtom);
const response = await fetch(`https://api.example.com/users/${userId}/posts`);
return response.json();
});
// Atom dérivé qui combine les données
const userProfileAtom = atom(async (get) => {
const userData = await get(userDataAtom);
const userPosts = await get(userPostsAtom);
return {
...userData,
postsCount: userPosts.length,
posts: userPosts.slice(0, 5) // Seulement les 5 premiers
};
});
// Composant avec Suspense
import { Suspense } from 'react';
function UserProfile() {
const [userId, setUserId] = useAtom(userIdAtom);
const [profile] = useAtom(userProfileAtom);
return (
<div>
<h2>{profile.name}</h2>
<p>Email: {profile.email}</p>
<p>Total de posts: {profile.postsCount}</p>
<h3>Posts récents:</h3>
<ul>
{profile.posts.map(post => (
<li key={post.id}>{post.title}</li>
))}
</ul>
<button onClick={() => setUserId(userId + 1)}>
Utilisateur Suivant
</button>
</div>
);
}
function App() {
return (
<Suspense fallback={<div>Chargement...</div>}>
<UserProfile />
</Suspense>
);
}Jotai gère automatiquement les loading states et le re-fetching quand les dépendances changent. Intégration parfaite avec React Suspense !
Comparaison : Zustand vs Jotai vs Redux
Comparons les trois approches côte à côte :
| Aspect | Zustand | Jotai | Redux (RTK) |
|---|---|---|---|
| Bundle Size | ~1KB | ~3KB | ~15KB |
| Boilerplate | Minimum | Minimum | Moyen (avec RTK) |
| Learning Curve | Très douce | Douce | Abrupte |
| API Style | Flux-like (centralisée) | Atomic (décentralisée) | Flux (centralisée) |
| TypeScript | Excellent | Excellent | Très bon |
| DevTools | Oui (middleware) | Oui (extension) | Oui (natif) |
| Persistance | Oui (middleware) | Oui (utilities) | Oui (bibliothèques) |
| Async | Manuel (fetch dans action) | Natif (async atoms) | Thunks/Sagas |
| Computed Values | Manuel | Natif (derived atoms) | Selectors (reselect) |
| Re-render Control | Sélecteurs | Granulaire (par atom) | Sélecteurs |
Quand utiliser Zustand :
- Vous voulez la simplicité maximale avec une API familière (style Redux)
- Vous préférez une store centralisée
- Migration de Redux vers quelque chose de plus léger
- Projets petits à moyens
- Vous voulez un contrôle total sur quand et comment l'état change
Quand utiliser Jotai :
- Vous aimez la philosophie de state atomique
- Vous avez beaucoup d'état asynchrone (fetching d'APIs)
- Vous voulez une intégration parfaite avec Suspense
- Vous avez besoin de computed values complexes
- Vous préférez la composition bottom-up (petits atoms composant des atoms plus grands)
Quand encore utiliser Redux :
- Application enterprise très grande et complexe
- Équipe déjà familiarisée avec Redux
- Besoin de middlewares spécifiques de l'écosystème Redux
- Le debugging avancé avec time-travel est critique
- Les patterns strictement définis sont importants
Patterns et Bonnes Pratiques
Indépendamment du choix, certaines pratiques sont universelles :
1. Séparation des Concerns :
// ❌ Évitez la logique métier dans le composant
function BadComponent() {
const [items, setItems] = useAtom(itemsAtom);
const addItem = (item) => {
// Logique complexe ici
if (items.length < 10 && item.price > 0) {
setItems([...items, { ...item, id: Date.now() }]);
}
};
return <button onClick={() => addItem(newItem)}>Ajouter</button>;
}
// ✅ Déplacez la logique vers les atoms/stores
const addItemAtom = atom(
null,
(get, set, item) => {
const items = get(itemsAtom);
if (items.length < 10 && item.price > 0) {
set(itemsAtom, [...items, { ...item, id: Date.now() }]);
}
}
);2. Normalisation des Données :
// ❌ Arrays imbriqués (difficile à mettre à jour)
const badState = {
users: [
{ id: 1, posts: [{ id: 1, title: 'Post 1' }] }
]
};
// ✅ État normalisé
const usersAtom = atom({
'1': { id: 1, name: 'Jeff', postIds: [1, 2] }
});
const postsAtom = atom({
'1': { id: 1, title: 'Post 1', userId: 1 },
'2': { id: 2, title: 'Post 2', userId: 1 }
});3. Sélecteurs pour la Performance :
// Avec Zustand
const useCartStore = create((set, get) => ({
items: [],
// Sélecteur optimisé
}));
// Utilisation - ne se re-rend que quand totalPrice change
const totalPrice = useCartStore((state) =>
state.items.reduce((sum, item) => sum + item.price, 0)
);
// Avec Jotai
const totalPriceAtom = atom((get) => {
const items = get(itemsAtom);
return items.reduce((sum, item) => sum + item.price, 0);
});Performance : Mesurer l'Impact Réel
J'ai fait quelques benchmarks comparant les trois bibliothèques dans des scénarios courants :
Test 1 : Mise à jour de 1000 items dans une liste
- Redux (RTK) : ~28ms
- Zustand : ~12ms
- Jotai : ~8ms
Test 2 : Re-renders dans un composant avec sélecteur
- Redux : 0 re-renders (avec useSelector optimisé)
- Zustand : 0 re-renders (avec sélecteur de state)
- Jotai : 0 re-renders (granularité des atoms)
Test 3 : Impact sur le bundle size (gzipped)
- Redux + RTK + Reselect : ~16.2KB
- Zustand : ~1.2KB
- Jotai : ~2.8KB
Conclusion des tests :
Pour la plupart des cas, les différences de performance sont négligeables. Ce qui compte vraiment est la Developer Experience (DX) et la facilité de maintenance du code.
Migrer de Redux vers Zustand ou Jotai
Si vous avez une application Redux et voulez migrer, la transition peut être graduelle :
Stratégie de migration :
- Identifiez les parties isolées : Commencez avec des features à faible couplage
- Migrez slice par slice : Pas besoin de tout migrer d'un coup
- Maintenez la compatibilité : Utilisez les deux bibliothèques pendant la transition
- Simplifiez graduellement : Supprimez le boilerplate inutile progressivement
Exemple de feature migrée :
// AVANT : Redux Slice
const cartSlice = createSlice({
name: 'cart',
initialState: { items: [] },
reducers: {
addItem: (state, action) => {
state.items.push(action.payload);
}
}
});
// APRÈS : Zustand
const useCartStore = create((set) => ({
items: [],
addItem: (item) => set((state) => ({
items: [...state.items, item]
}))
}));
// Ou APRÈS : Jotai
const cartItemsAtom = atom([]);
const addItemAtom = atom(
null,
(get, set, item) => set(cartItemsAtom, [...get(cartItemsAtom), item])
);Si vous vous sentez inspiré par la simplicité de ces nouvelles bibliothèques, je recommande de jeter un œil à un autre article : WebAssembly Révolutionne la Performance des Applications Web : Ce Que Vous Devez Savoir où vous découvrirez une autre technologie qui change le paradigme du développement web.
C'est parti ! 🦅
🎯 Rejoignez les Développeurs Qui Évoluent
Des milliers de développeurs utilisent déjà notre matériel pour accélérer leurs études et conquérir de meilleures positions sur le marché.
Pourquoi investir dans des connaissances structurées ?
Apprendre de façon organisée et avec des exemples pratiques fait toute la différence dans votre parcours de développeur.
Commencez maintenant :
- €9,90 (paiement unique)
"Matériel excellent pour ceux qui veulent approfondir !" - Jean, Développeur