Frontend Academy · Leçon

useContext pour l’état global

useContext pour l’état global est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 1 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.

Le problème du passage en cascade des propriétés

Le passage en cascade des propriétés consiste à transmettre des données à travers de nombreux composants intermédiaires qui ne les utilisent pas, simplement pour atteindre un composant enfant profondément imbriqué. Le contexte résout ce problème en rendant une valeur disponible pour n’importe quel composant de l’arbre sans la transmettre explicitement.

Créer un contexte

createContext(defaultValue) crée un objet de contexte. La valeur par défaut est utilisée lorsqu’un composant lit le contexte sans fournisseur correspondant au-dessus de lui.

import { createContext } from 'react';

interface ThemeContextType {
  theme: 'light' | 'dark';
  toggleTheme: () => void;
}

const ThemeContext = createContext<ThemeContextType>({
  theme: 'light',
  toggleTheme: () => {}
});

Fournir le contexte

Entourez la partie de l’arbre qui a besoin du contexte avec le fournisseur. Tous les composants qu’elle contient peuvent lire la valeur du contexte.

function ThemeProvider({ children }: { children: React.ReactNode }) {
  const [theme, setTheme] = useState<'light' | 'dark'>('light');

  const toggleTheme = () => setTheme(t => t === 'light' ? 'dark' : 'light');

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

// In app root:
<ThemeProvider>
  <App />
</ThemeProvider>

Consommer avec useContext

Tout composant situé à l'intérieur du fournisseur peut accéder à la valeur du contexte avec useContext(ThemeContext). Il n'est pas nécessaire de transmettre quoi que ce soit comme propriété.

function ThemeToggle() {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <button onClick={toggleTheme}>
      Switch to {theme === 'light' ? 'dark' : 'light'} mode
    </button>
  );
}

Fonction personnalisée encapsulant useContext

Exposez une fonction personnalisée qui appelle useContext en interne. C'est plus propre que d'exposer directement le contexte et cela vous permet d'ajouter une validation.

function useTheme() {
  const ctx = useContext(ThemeContext);
  if (!ctx) throw new Error('useTheme must be used inside ThemeProvider');
  return ctx;
}

// Usage:
const { theme } = useTheme();

Nouveaux rendus du contexte

Lorsque la valeur du fournisseur change, tous les consommateurs effectuent un nouveau rendu. Si la valeur est un objet, une nouvelle référence d'objet à chaque rendu entraînera un nouveau rendu de tous les consommateurs. Mémorisez la valeur avec useMemo pour éviter cela.

const value = useMemo(
  () => ({ theme, toggleTheme }),
  [theme] // toggleTheme is stable if created with useCallback
);

<ThemeContext.Provider value={value}>

Quand utiliser le contexte

Convient pour : thème, langue, utilisateur authentifié, indicateurs de fonctionnalités, système de notifications. Moins adapté pour : mises à jour à haute fréquence (à chaque frappe), état volumineux et complexe (utilisez plutôt un magasin).

Contextes multiples

Vous pouvez avoir plusieurs contextes indépendants. Gardez-les ciblés — un AuthContext pour l'authentification, un ThemeContext pour le thème. Évitez un contexte monolithique qui contient tout.

Contexte ou Redux

Le contexte est intégré et suffit pour les données globales qui changent peu fréquemment. Redux/Zustand/Pinia sont plus adaptés à un état complexe avec de nombreuses mises à jour, au débogage avec retour dans le temps ou à des besoins en intergiciels.

Modèle de contexte d'authentification

Un modèle courant consiste à utiliser un AuthContext qui contient l'utilisateur actuel et les méthodes d'authentification. Les composants consommateurs obtiennent l'utilisateur sans transmettre les propriétés de proche en proche.

interface AuthContext {
  user: User | null;
  login: (creds: Credentials) => Promise<void>;
  logout: () => void;
}
const AuthCtx = createContext<AuthContext | null>(null);
export const useAuth = () => {
  const ctx = useContext(AuthCtx);
  if (!ctx) throw new Error('Outside AuthProvider');
  return ctx;
};

Contexte et TypeScript

Définissez le type du contexte avec une interface. Utilisez une valeur nulle comme valeur initiale et déclenchez une erreur dans la fonction personnalisée si elle est nulle. Cela empêche que l'état impossible « consommé en dehors du fournisseur » passe silencieusement.

Performances : memo + contexte

Les composants encapsulés par React.memo n'effectuent pas de nouveau rendu tant que leurs propriétés ne changent pas. Si la sortie d'un consommateur de contexte ne dépend que d'une partie du contexte, séparez le contexte ou utilisez des motifs de sélection pour éviter les nouveaux rendus inutiles.

Vérification rapide

Que renvoie useContext(MyContext) lorsqu'elle est appelée dans un composant qui n'a aucun fournisseur au-dessus de lui ?

Récapitulatif : useContext

createContext crée un contexte avec une valeur par défaut. Encapsulez l'arbre dans un fournisseur pour fournir une valeur. useContext lit la valeur n'importe où à l'intérieur. Les fonctions personnalisées encapsulent useContext pour effectuer une validation. Mémorisez la valeur du fournisseur pour éviter les nouveaux rendus inutiles. Utilisez-le pour les données globales qui changent peu fréquemment, comme le thème et l'authentification.

Questions Fréquemment Posées

La leçon « useContext pour l’état global » est-elle gratuite ?

Oui — le texte complet de « useContext pour l’état global » 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 « useContext pour l’état global » ?

Créez un Context, entourez une sous-arborescence de son Provider et consommez la valeur avec useContext pour partager l’état du thème ou de l’authentification sans transmettre les props de proche en… 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 1 sur 4.

Combien de temps prend la leçon « useContext pour l’état global » ?

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

useContext pour l’état global
useReducer pour les états complexes
useMemo et useCallback pour les performances
Hooks personnalisés : extraire une logique réutilisable

← Retour à Frontend Academy