Retour • 12/02/2025
Zustand : Le guide complet pour gérer ton state en React
Écris par Melvyn Malherbe le 12/02/2025
Tu cherches une solution simple et efficace pour gérer l'état de ton application React ? Zustand est là pour ça ! C'est un gestionnaire d'état minimaliste mais puissant qui va révolutionner ta façon de gérer les données.
Pourquoi Zustand ?
Imagine que tu construis une maison. Redux, c'est comme avoir un énorme entrepôt avec des processus complexes pour gérer chaque meuble. Zustand, c'est comme avoir un système de rangement simple mais efficace, directement dans ta maison.
Zustand brille par sa simplicité :
- Pas de Provider à wrapper autour de ton app
- Une API simple basée sur les hooks
- Compatible TypeScript
- Performances optimisées
Comment utiliser Zustand ?
Commençons par un exemple simple :
Dans cet exemple :
- On crée un store avec
create
- On définit notre state initial et nos actions
- On utilise le hook
useStore
pour accéder au state
L'état immuable avec Zustand
Un concept important en React est l'immutabilité. Cela signifie qu'on ne modifie jamais directement le state, on crée une nouvelle copie.
Voici un exemple plus complexe :
TypeScript avec Zustand
Zustand est conçu pour fonctionner parfaitement avec TypeScript. Voici un exemple plus avancé :
type User = {
id: number
name: string
}
type AuthStore = {
user: User | null
isLoading: boolean
error: string | null
login: (username: string, password: string) => Promise<void>
logout: () => void
}
const useAuthStore = create<AuthStore>((set) => ({
user: null,
isLoading: false,
error: null,
login: async (username, password) => {
set({ isLoading: true, error: null })
try {
// Simule un appel API
const user = await api.login(username, password)
set({ user, isLoading: false })
} catch (error) {
set({ error: error.message, isLoading: false })
}
},
logout: () => set({ user: null })
}))
Optimiser les re-renders avec useShallow
Parfois, tu veux sélectionner plusieurs valeurs du store sans causer de re-render inutile. C'est là qu'intervient useShallow
:
Dans cet exemple, UserInfo
ne se re-rendra pas quand l'âge change, car useShallow
compare superficiellement l'objet retourné.
Bonnes pratiques
- Sépare tes stores : Crée plusieurs petits stores plutôt qu'un gros
- Utilise l'immutabilité : Ne modifie jamais directement le state
- TypeScript : Définis bien tes types pour une meilleure maintenabilité
- Optimise les re-renders : Utilise
useShallow
quand nécessaire
Conclusion
Zustand est un excellent choix pour la gestion d'état en React. Il est simple à utiliser, performant et bien pensé. Si tu débutes avec la gestion d'état, c'est probablement le meilleur choix pour commencer !
N'hésite pas à consulter la documentation officielle pour approfondir tes connaissances.