Le Contexte contre Zustand est souvent présenté comme une argumentation du type "tout ou rien". Ce n'est pas le cas. Ils résolvent des problèmes différents, et la conversation sur la performance n'a de sens qu'après que cela est clair.
Le Contexte est bon pour distribuer des valeurs à travers l'arbre. Zustand est bon pour maintenir un magasin externe avec des abonnements ciblés.
Où le Contexte est le Meilleur Outil
Le Contexte est particulièrement adapté lorsque la valeur est conceptuellement ambiante :
- thème
- langue
- utilisateur authentifié
- drapeaux de fonctionnalité
Ce type d'état appartient près de l'arbre car l'arbre est le point focal.
Où Zustand Aide
Zustand devient attrayant lorsque de nombreux composants ont besoin d'un état mutable partagé, mais pas tous ne nécessitent chaque mise à jour :
const useCartStore = create((set) => ({
count: 0,
increment: () => set((state) => ({ count: state.count + 1 })),
}));
const count = useCartStore((state) => state.count);
Ce modèle de sélecteur est la différence pratique. Les composants peuvent s'abonner à une tranche au lieu de consommer un large objet contextuel.
Meilleure Règle de Décision
Ne demandez pas, "Lequel est le plus rapide ?" Demandez :
- cette valeur est-elle globale ou ambiante ?
- à quelle fréquence change-t-elle ?
- combien de composants se soucient de chaque champ ?
- avons-nous besoin de sémantiques de magasin en dehors de l'arbre ?
Si la réponse est principalement une configuration ambiante, le Contexte est suffisant. Si la réponse est un état d'application partagé avec des abonnements sélectifs, Zustand est généralement le choix le plus propre.
Lectures Complémentaires