Projet open source
pmndrs/zustand avatar
pmndrs/zustand

zustand : un store hook sans provider

Supportez les nécessités pour la gestion de l’état dans React. Si vous souhaitez construire un seul objet avec plusieurs sélections d'état à l'intérieur, similaire au mapStateToProps de Redux, vous pouvez utiliser useShallow pour éviter les rendus inutiles lorsque la sortie du sélecteur ne change pas en fonction de l'égalité superficielle.

58 679 étoiles2 187 forksTypeScriptMIT

En bref

De quoi s’agit-il ?
Bear necessities for state management in React. If you want to construct a single object with multiple state-picks inside, similar to redux's mapStateToProps, you can use useShallow to prevent unnecessary rerenders when the selector output does not change according to shallow equal.. Analyse pratique fondée sur le README de pmndrs/zustand.
À qui s’adresse-t-il ?
`useShallow` traite les sélections d objet ou de tableau lorsque l égalité stricte provoquerait des rendus inutiles. Pour React Server Components, le README signale un risque de bugs et de confidentialité avec l accès impératif au store.
Puis-je l’utiliser commercialement ?
Oui. MIT est une licence permissive : vous pouvez utiliser, modifier et vendre un logiciel qui en dépend, à condition de conserver les mentions de droit d’auteur et de licence.
Est-il encore maintenu ?
Oui. Les derniers commits datent d’il y a 5 jours.
En quel langage est-il écrit ?
Principalement TypeScript, d’après les statistiques de langage de GitHub.

Ces réponses reposent sur les données GitHub du projet (dernière synchronisation le 14 septembre 2026) et sur notre analyse. Elles ne constituent pas un avis juridique.

ANALYSE OPEN SOURCE APPROFONDIE

Une solution d'état minimale avec hooks

Zustand se décrit comme une petite solution de gestion d'état rapide et évolutive, utilisant des principes flux simplifiés. Son README indique que l'API est basée sur les hooks, n'est pas verbeuse ni dogmatique, et que du temps a été consacré aux pièges courants tels que le problème des enfants zombies, la concurrence de React et la perte de contexte entre les rendus mixtes. La commande d'installation est `npm install zustand`, et le README pointe vers une démo en direct et une documentation. Le dépôt est écrit en TypeScript et hébergé sous pmndrs, avec la description « Bear necessities for state management in React ».

L'API principale est `create`, qui prend une fonction recevant `set` et éventuellement `get`, et renvoie l'état initial. L'exemple du README définit un store avec `bears`, `increasePopulation` et `removeAllBears`, où `set` fusionne l'état par défaut. Le store résultant est un hook qui peut être utilisé sans aucun provider. Pour lier un composant, vous appelez le hook avec un sélecteur, et le composant ne se ré-rend que lorsque la valeur sélectionnée change. Le README avertit que récupérer tout l'état avec `useBearStore()` met à jour le composant à chaque changement d'état. Pour plusieurs sélections, `useShallow` évite les ré-rendus inutiles lorsque la sortie du sélecteur est égale de manière superficielle.

Pour un accès non réactif, le hook du store ex

Le README de pmndrs/zustand ne donne pas ici de mesure indépendante au-delà de ce périmètre. Cette réserve décrit la portée annoncée et le résultat attendu dans votre contexte.

Créer un store et lier des composants

pose `getState`, `setState` et `subscribe`. Le README montre comment lire l'état frais, écouter tous les changements et se désabonner. Le middleware `subscribeWithSelector` ajoute une signature de sélecteur avec des options comme `equalityFn` et `fireImmediately`. Les mises à jour transitoires sont gérées en s'abonnant dans `useEffect` et en modifiant une ref, ce qui évite les ré-rendus. Zustand peut également fonctionner sans React : `createStore` de `zustand/vanilla` renvoie `getState`, `setState`, `subscribe` et `getInitialState`, et le hook `useStore` lie un store vanilla à React. Le README note que les middlewares qui modifient `set` ou `get` ne sont pas appliqués à `getState` et `setState`.

Le README documente plusieurs middlewares. `persist` enregistre les données du store dans n'importe quel stockage, avec `createJSONStorage` et un nom unique ; par défaut, il utilise `localStorage`. Le middleware `immer` permet de muter l'état dans les callbacks `set`. Le middleware `redux` connecte un réducteur et ajoute une fonction `dispatch`. Le middleware `devtools` s'intègre à l'extension Redux DevTools, prend en charge la nomination des stores, les options de sérialisation, la journalisation des types d'action personnalisés et la désactivation en production avec `enabled: false`. Il montre également comment partager une seule connexion devtools entre plusieurs stores.

Le README de pmndrs/zustand ne donne pas ici de mesure indépendante au-delà de ce périmètre. Cette réserve rappelle que la documentation ne remplace pas l observation du service lancé.

Accès à l'état hors des composants et mises à jour transitoires

Pour l'injection de dépendances ou l'initialisation d'un store à partir des props d'un composant, le README recommande d'utiliser un store vanilla avec le contexte React : `createStore` pour le store, puis `useStore` dans un composant. L'utilisation de TypeScript nécessite `create<State>()(...)` ; un guide plus détaillé est lié. La section des bonnes pratiques renvoie à des guides sur la division des stores en tranches, la pratique inspirée de Flux, les tests et la gestion des actions en dehors des gestionnaires d'événements dans pre-React 18. Les bibliothèques tierces sont répertoriées dans un document dédié.

Le README compare zustand à redux et au contexte. Par rapport à redux, il met en avant la simplicité, les hooks comme principal moyen de consommation, l'absence de fournisseurs de contexte et les mises à jour transitoires. Par rapport au contexte, il mentionne moins de code passe-partout, le rendu uniquement lors des changements et un état centralisé basé sur des actions. Une comparaison complète est liée. Le projet est sous licence MIT, ce qui accorde la permission d'utiliser, copier, modifier, fusionner, publier, distribuer, sous-licencier et vendre des copies, mais la licence ne fournit aucune garantie. Le README ne contient pas de chiffres de référence ni de garanties de sécurité, ces affirmations de performance et de sécurité restent donc non quantifiées.

Le README de pmndrs/zustand ne donne pas ici de mesure indépendante au-delà de ce périmètre. Cette réserve sépare les faits publiés des hypothèses sur votre charge réelle.

Un store hook sans Provider : installation

`create` produit un hook qui contient primitives, objets et fonctions. Les composants sélectionnent uniquement la valeur dont ils ont besoin, sans ajouter de Provider React.

Le README de pmndrs/zustand ne donne pas ici de mesure indépendante au-delà de ce périmètre. Cette réserve situe la commande de contrôle dans le périmètre précis du projet.

Un store hook sans Provider : usage

Le contrôle pertinent consiste à installer avec `npm install zustand`, lancer le demo indiqué par le dépôt, puis comparer un composant utilisant `useBearStore((state) => state.bears)` avec un composant qui lit tout le store.

Le README de pmndrs/zustand ne donne pas ici de mesure indépendante au-delà de ce périmètre. Cette réserve indique pourquoi les limites documentées doivent rester visibles lors du choix.

Un store hook sans Provider : limites

`useShallow` traite les sélections d objet ou de tableau lorsque l égalité stricte provoquerait des rendus inutiles. Pour React Server Components, le README signale un risque de bugs et de confidentialité avec l accès impératif au store.

Le README de pmndrs/zustand ne donne pas ici de mesure indépendante au-delà de ce périmètre. Cette réserve ferme l analyse sur le comportement réellement décrit par la source.

Conclusion éditoriale

`useShallow` traite les sélections d objet ou de tableau lorsque l égalité stricte provoquerait des rendus inutiles. Pour React Server Components, le README signale un risque de bugs et de confidentialité avec l accès impératif au store. Pour décider, exécutez le contrôle propre à pmndrs/zustand décrit dans la section correspondante et conservez le résultat observé avec la version utilisée.

Sources officielles

  1. Official documentation
  2. Official README
  3. Project repository
  4. Release notes
Notes de la communauté

Notes de la communauté