valtio

Valtio est une bibliothèque de gestion d'état construite autour des proxies JavaScript, utilisable avec React et en JavaScript vanilla pur. Son idée centrale est simple : enveloppez un objet d'état avec `proxy()` et il devient un proxy auto-conscient qui peut être muté comme un objet normal depuis n'importe où dans votre code. Capacités clés décrites dans le README : - **État proxy** : `proxy({ count: 0, text: 'hello' })` crée un état mutable ; des mutations telles que `++state.count` fonctionnent comme avec des objets ordinaires. - **Intégration React** : `useSnapshot(state)` renvoie un snapshot local pour le rendu. Les composants ne se re-rendent que lorsque les parties de l'état auxquelles ils accèdent changent, ce que le projet décrit comme optimisé pour le rendu. Une option `sync: true` désactive le batching pour des cas comme les champs de saisie contrôlés. - **Abonnements** : `subscribe` fonctionne sur l'état entier ou des sous-objets, et `subscribeKey` cible des valeurs primitives. Un utilitaire `watch` s'abonne automatiquement en fonction de l'usage. - **Prise en charge de Suspense** : Compatible avec le hook `use` de React 19 pour lire des données asynchrones contenues dans l'état, le parent gérant le fallback et les erreurs. - **Objets non suivis** : `ref` conserve de grands objets ou des objets spéciaux (comme des nœuds DOM) dans l'état sans les proxifier. - **Usage vanilla** : `valtio/vanilla` exporte `proxy`, `subscribe` et `snapshot` pour une utilisation hors de React. - **Utilitaires** : `useProxy` offre un proxy superficiel simplifié pour les débutants ; `proxySet` et `proxyMap` imitent le comportement natif de Set et Map ; des propriétés calculées peuvent être définies avec des getters d'objet. - **Outils de développement** : Intégration avec l'extension Redux DevTools pour les objets simples et les tableaux. - **Compatibilité** : Valtio v2 cible React 18 et versions supérieures, ne dépend que de `react`, et fonctionne avec des moteurs de rendu tels que react-dom, react-native et react-three-fiber, ainsi qu'avec Node.js et Next.js. Le README note également des mises en garde concernant le typage TypeScript autour du type snapshot en lecture seule, avertit sur le comportement de `this` dans les méthodes (en recommandant les fonctions fléchées), et renvoie vers un plugin eslint ainsi que des recettes communautaires pour organiser les actions, persister l'état, utiliser le contexte, et diviser/composer l'état.