0Pricing
Frontend Academy · Leçon

Quand utiliser un état global ou local

Appliquez le principe de colocalisation : gardez l’état aussi près que possible de son consommateur et ne le remontez que lorsque plusieurs composants sans lien en ont besoin.

Quand utiliser un état global ou local est une leçon Frontend 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 Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.

Où placer l’état ?

Chaque élément d’état a un emplacement optimal. Choisir le mauvais emplacement entraîne soit les difficultés liées à la transmission en cascade des props, soit une complexité inutile de l’état global. Le principe directeur est de conserver l’état aussi près que possible des éléments qui l’utilisent.

État local du composant

Si un seul composant utilise l’état, celui-ci doit se trouver dans le useState/ref de ce composant. Aucun partage n’est nécessaire : gardez-le local. C’est le cas le plus simple et le plus courant.

// Good: UI state local to the component
function Accordion() {
  const [isOpen, setIsOpen] = useState(false); // only this component cares
  return (
    <div>
      <button onClick={() => setIsOpen(o => !o)}>Toggle</button>
      {isOpen && <div>Content</div>}
    </div>
  );
}

Remonter l’état

Lorsque deux composants frères ont besoin du même état, remontez-le vers leur ancêtre commun le plus proche. Transmettez-le au moyen de props et de fonctions de rappel. C’est l’approche standard de React/Vue avant de recourir à un store global.

Contexte partagé — partage intermédiaire

Lorsque l’état doit être partagé dans un sous-arbre sans transmission en cascade des props, Context (React) ou provide/inject (Vue) est l’outil approprié. Cette solution convient à un partage de portée modérée (une page, un module fonctionnel).

Store global — état de toute l’application

Utilisez un store global (Redux, Zustand, Pinia) pour un état qui : 1) est consulté par de nombreux composants sans lien entre eux, 2) doit être conservé lors de la navigation, 3) possède une logique de mise à jour complexe, 4) bénéficie d’une inspection dans DevTools.

Exemples : état local

L’état local convient pour : les valeurs des champs de formulaire, l’ouverture ou la fermeture d’une infobulle, la visibilité d’une fenêtre modale, l’état au survol, l’état d’une animation et les indicateurs de chargement propres à un seul composant.

Exemples : état remonté

L’état remonté convient pour : un filtre partagé utilisé par deux listes sœurs, l’onglet sélectionné dans un groupe d’onglets et les données d’un formulaire partagées entre deux étapes.

Exemples : contexte / provide

Context convient pour : le thème actuel, l’utilisateur authentifié, la langue ou les paramètres régionaux, les indicateurs de fonctionnalité et la pile de notifications — des éléments utilisés à de nombreux niveaux, mais rarement mis à jour.

Exemples : store global

Un store global convient pour : le panier, les jetons d’authentification et l’objet utilisateur, la file d’attente des notifications (les messages apparaissent dans une notification toast depuis n’importe quel endroit) et les données en temps réel affichées simultanément dans plusieurs vues.

État serveur ou état client

Les données réseau (récupérées depuis une API) constituent une catégorie particulière : l’état serveur. Elles nécessitent une gestion du chargement et des erreurs, une mise en cache et une invalidation. React Query / SWR / TanStack Query gèrent l’état serveur afin que votre store puisse se concentrer sur le véritable état client.

Erreur courante : tout mettre dans le store global

Ne placez pas tout l’état dans le store global « au cas où ». L’état local coûte moins cher, est plus simple et plus facile à tester. L’utilisation excessive de l’état global crée un couplage entre des composants qui devraient être indépendants.

Cadre de décision

Posez-vous les questions suivantes : 1) D’autres composants en ont-ils besoin ? Non → local. 2) Des composants frères proches en ont-ils besoin ? Oui → remontez-le. 3) Un sous-arbre de composants en a-t-il besoin ? Oui → contexte/provide. 4) De nombreux composants sans lien en ont-ils besoin, ou faut-il l’inspecter dans DevTools ? Oui → store global.

Vérification rapide

Où devez-vous stocker l’état ouvert/fermé d’un seul composant d’accordéon ?

Récapitulatif : emplacement de l’état

Principe : conservez l’état aussi près que possible des éléments qui l’utilisent. useState/ref local pour l’état d’un seul composant. Remontez l’état pour le partager entre composants frères. Utilisez Context/provide pour le partager dans un sous-arbre. Utilisez un store global pour l’état de toute l’application avec des mises à jour complexes. L’état serveur (données d’API) doit être géré par React Query/SWR, et non par le store global.

Questions Fréquemment Posées

La leçon « Quand utiliser un état global ou local » est-elle gratuite ?

Oui — le texte complet de « Quand utiliser un état global ou local » 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 Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Quand utiliser un état global ou local » ?

Appliquez le principe de colocalisation : gardez l’état aussi près que possible de son consommateur et ne le remontez que lorsque plusieurs composants sans lien en ont besoin. Tu pratiques Frontend 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 Frontend Academy ?

Aucune expérience préalable n'est requise. Frontend 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 utiliser un état global ou local » ?

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 Frontend Academy ?

Oui. Chaque leçon Frontend 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

  1. Redux Toolkit : createSlice et configureStore
  2. Zustand pour un état React léger
  3. Pinia pour Vue : defineStore et storeToRefs
  4. Quand utiliser un état global ou local
← Retour à Frontend Academy