Il y a quelques jours, j'ai été adapté à un nouveau département. Mon nouveau collègue m'a confié la tâche de refactoriser un projet React existant.

Lorsque je lisais le code, j'ai été choqué par la manière d'utiliser l'API Context. Le codeur précédent, qui mettait tout (oui, presque tout) dans un objet Context, le traitait comme un magasin pour gérer tous les états et même certains états temporaires locaux. C'est fou !

Et il code également tout pour une page dans un seul (oui, absolument un seul) composant dans un seul fichier .ts. C'est tellement difficile pour moi de comprendre clairement la logique du code. Mais j'accepte toujours ces codes merdiques (je n'ai pas le choix), alors je prends une grande décision : je réécrirais toutes ces pages en une semaine avec Mobx et diviserais le code en différents composants fonctionnels.

Avec Mobx, je crée plusieurs magasins pour gérer toutes les données des API et diviser un énorme composant en différents petits morceaux ; tout commence à devenir clair et simple. L'état local devrait être dans son champ d'application là où il serait utilisé, la partie commune proviendra du magasin de Mobx.

Enfin, j'ai totalement supprimé l'objet Context, des milliers de lignes de code ont été supprimées et le monde est à nouveau calme !

Je veux dire quelque chose à propos de l'API Contexte. Si vous avez vraiment quelque chose, comme des informations de configuration globales à partager avec l'ensemble de l'application, vous pouvez utiliser l'API Context. Mais si vous voulez simplement éviter d'utiliser une bibliothèque de gestion d'état tierce, c'est une mauvaise idée de traiter le contexte comme un remplacement.

Laissez le contexte être le contexte et laissez l'état être géré par des bibliothèques comme Mobx.

Arrêtez d'abuser de l'API React Context, s'il vous plaît !