React Academy · Leçon

Quand ne pas utiliser Context

Identifiez les cas où le passage de propriétés, la composition ou un gestionnaire d’état conviennent mieux.

Quand ne pas utiliser Context est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage React Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Academy comprend 4 leçons au total.

Bienvenue

Dans cette leçon, vous apprendrez quand React Context est un outil inadapté et vous reconnaîtrez les situations où le passage de propriétés, la composition ou un gestionnaire d’état constitue une solution plus appropriée et plus simple.

Le contexte n'est pas une solution miracle

Le contexte est souvent utilisé à l'excès. Les développeurs y recourent pour éviter tout passage de propriétés, mais cela crée des dépendances cachées, rend les composants plus difficiles à tester et peut nuire aux performances.

Quand les propriétés sont préférables

Si une valeur est utilisée par 1 à 3 composants étroitement imbriqués, le passage de propriétés est plus simple, plus explicite et plus facile à suivre. Le contexte ajoute du code répétitif autour du fournisseur et masque le flux de données.

// Don't need Context for this
function Page() {
  const [color, setColor] = useState('blue');
  return <Header color={color} />; // simple, clear
}

Quand la composition est préférable

Si vous devez éviter de faire transiter des données sur 3 niveaux ou plus, essayez d'abord la composition : transmettez le consommateur entièrement rendu comme propriété. Aucun contexte n'est nécessaire et le flux de données reste explicite.

Le contexte crée un couplage caché

Un composant qui appelle useContext(UserCtx) ne peut pas être réutilisé sans être enveloppé dans un UserProvider. Les propriétés rendent les dépendances explicites : vous pouvez voir exactement ce dont un composant a besoin dans sa signature.

Mises à jour fréquentes

N'utilisez pas le contexte pour des valeurs qui changent plusieurs fois par seconde, comme la position de la souris ou la progression d'une animation. Chaque changement entraîne un nouveau rendu de tous les consommateurs. Utilisez plutôt des références, des magasins externes ou une bibliothèque fondée sur des signaux.

Le contexte n'est pas un gestionnaire d'état

Le contexte se contente de distribuer des valeurs : il n'intègre ni mise en cache, ni outils de développement, ni intergiciel. Pour un état partagé complexe avec des mises à jour fréquentes, utilisez Zustand, Redux ou Jotai, qui sont conçus à cette fin.

L'état serveur n'a pas sa place dans le contexte

Les données récupérées depuis un serveur, comme une liste d'utilisateurs ou des publications, n'ont pas leur place dans le contexte. React Query, SWR ou RTK Query gèrent l'état serveur avec une mise en cache, une nouvelle récupération en arrière-plan et des états d'erreur ; le contexte ne fournit rien de tout cela.

L'état d'un formulaire n'a pas sa place dans le contexte

Gérer les champs d'un formulaire dans le contexte entraîne un nouveau rendu de tous les consommateurs du contexte à chaque frappe. Utilisez plutôt l'état local du composant ou une bibliothèque de formulaires comme React Hook Form.

Quand le contexte IS le bon outil

Le contexte est idéal pour : l'utilisateur actuel et son état d'authentification, le thème clair ou sombre, les paramètres régionaux et l'i18n, ainsi que d'autres valeurs transversales stables que de nombreux composants lisent, mais qui changent rarement.

Vérification rapide

Quel type de données est LEAST approprié pour être stocké dans le contexte React ?

Récapitulatif

Utilisez le contexte pour les valeurs transversales stables comme l'authentification, le thème et les paramètres régionaux. Préférez les propriétés pour 1 à 3 niveaux de transmission. Préférez la composition pour éviter de faire transiter les données à travers plusieurs niveaux. Utilisez React Query pour l'état serveur, et Zustand ou Redux pour un état partagé complexe.

Cours terminé

Félicitations ! Vous avez terminé **Modèles et performances du contexte React**. Vous savez maintenant comment scinder les contextes, mémoriser les valeurs, appliquer des sélecteurs et, tout aussi important, quand ne pas utiliser le contexte du tout.

Questions Fréquemment Posées

La leçon « Quand ne pas utiliser Context » est-elle gratuite ?

Oui — le texte complet de « Quand ne pas utiliser Context » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours React Academy, passe à CoddyKit PRO. Le cours React Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Quand ne pas utiliser Context » ?

Identifiez les cas où le passage de propriétés, la composition ou un gestionnaire d’état conviennent mieux. Tu pratiques React Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer React Academy ?

Aucune expérience préalable n'est requise. React Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Quand ne pas utiliser Context » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon React Academy ?

Oui. Chaque leçon React Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Séparer les contextes pour limiter les nouveaux rendus
Mémoriser les valeurs de contexte avec useMemo
Modèle des sélecteurs de contexte
Quand ne pas utiliser Context

← Retour à React Academy