Zustand : Le guide complet pour gérer ton state en React

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 :

1. On crée un store avec create
2. On définit notre state initial et nos actions
3. 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

1. Sépare tes stores : Crée plusieurs petits stores plutôt qu'un gros
2. Utilise l'immutabilité : Ne modifie jamais directement le state
3. TypeScript : Définis bien tes types pour une meilleure maintenabilité
4. 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.