State Management, client state, server state, Pourquoi vous devriez utiliser React-Query.

Dans la plupart des cas, lorsque l’on parle de state management, on cherche plutôt un moyen de synchroniser l’état du front avec la base de données. C’est là qu’entre en jeu React Query.

Lorsque vous développez une application, vous devez gérer l’état de vos données de différentes manières. L’état de vos données peut être divisé en deux catégories principales: l’état côté serveur (ou server state) et l’état côté client (ou client state).

Server State:

L’état côté serveur fait référence aux données que l’on récupère via une API.

Pour gérer le server state de notre application, nous utilisons des requêtes HTTP pour envoyer et récupérer des données auprès de notre serveur, nous stockons ensuite ces données dans des variables d’état afin de les rendre accessibles aux différents composants de notre interface utilisateur. Le problème c’est qu’il nous faut gérer nous même les erreurs, l’état du chargement et la synchronisation de notre state.

C’est là qu’entre en jeux React-query (maintenant TanStack-Query)

React Query est une bibliothèque qui vise à simplifier la gestion de notre state en nous permettant de gérer l‘état de nos requêtes de manière efficace et de mettre à disposition un mécanisme de mise en cache des données que l’on peut synchroniser à tout moment et depuis des composants différents, sans forcément avoir à envoyer de nouvelles requêtes. Mais ce n’est pas tout, React Query permet de gérer l’état de chargement des données, ce qui peut être particulièrement utile lorsque vous utilisez plusieurs composants qui font des requêtes à une API, et si vous n’étiez pas encore convaincu, React-Query permet notamment de gérer les erreurs de manière centralisée et de les afficher de façon cohérente dans l’application. Pas mal non?

Client State:

L’état côté client fait plutôt référence aux interactions avec la page; l’ouverture d’une modale, la gestion de theme, le changement d’une vue, etc…

Pour gérer l’état côté client, il existe plusieurs possibilité comme l’API native de React ou des librairies comme Jotai ou Zustand. Bien que Redux soit connu et souvent utilisé, il a été conçu pour des applications de grande envergure avec une gestion de state complexe; Dan Abramov( React & Redux), dit lui même que Redux est une bibliothèque utile pour une gestion de state complexe ou pour des app de grande envergure mais qu’il est néanmoins important de ne pas l’utiliser de manière abusive et qu’il faut en priorité envisager d’autres solutions comme l’api native de react…

En résumé pour gérer le state de votre application React:

• Si vous travaillez sur une application qui fait des calls API, vous aurez besoin de synchroniser votre front et vous devriez certainement considérer l’utilisation de React Query.
• Si vous cherchez un moyen de gérer un state global côté client, Jotai ou l’api native peuvent être de bonnes solutions.
• Si vous chercher plutôt une state machine pour gérer vos actions, évènements, etc… vous pouvez vous tournez vers Zustand , et pour une application complexe et volumineuse, Redux

Il existe bien sur d’autres solutions, mais le nombre d’outils rendent souvent le choix difficile, j’ai donc préféré essayer ici de vous présenter des options qui me semble pertinentes.

Si vous voulez en savoir plus sur React-Query, le blog de Tkdodo est parfait pour appréhender les différents concepts.

Voilà, j’espère que cet article vous a été utile!

À bientôt!

Jordan