react18-legacy-context

Par github · awesome-copilot

Fournit le schéma de migration complet de l'API de contexte legacy React (contextTypes, childContextTypes, getChildContext) vers l'API moderne createContext. Utilisez cette skill dès lors que vous migrez du contexte legacy dans des class components — il s'agit toujours d'une migration multi-fichiers nécessitant la mise à jour simultanée du provider ET de tous les consumers. À utiliser avant de toucher tout code contextTypes ou childContextTypes, car migrer uniquement le provider sans les consumers (ou inversement) provoquera une erreur d'exécution. Lisez toujours cette skill avant d'écrire toute migration de contexte — les étapes de coordination multi-fichiers décrites ici permettent d'éviter les bugs de migration de contexte les plus courants.

npx skills add https://github.com/github/awesome-copilot --skill react18-legacy-context

Migration du Context Hérité de React 18

Le context hérité (contextTypes, childContextTypes, getChildContext) est déprécié depuis React 16.3 et génère des avertissements dans React 18.3.1. Il est supprimé dans React 19.

C'est Toujours une Migration Multi-Fichiers

Contrairement à la plupart des autres migrations qui touchent un fichier à la fois, la migration de context requiert de coordonner :

  1. Créer l'objet context (généralement un nouveau fichier)
  2. Mettre à jour le composant provider
  3. Mettre à jour tous les composants consommateurs

Oublier un consommateur laisse l'app cassée - il lira depuis le mauvais context ou obtiendra undefined.

Étapes de Migration (Toujours Suivre Cet Ordre)

Étape 1 : Trouver le provider (childContextTypes + getChildContext)
Étape 2 : Trouver TOUS les consommateurs (contextTypes)
Étape 3 : Créer le fichier context
Étape 4 : Mettre à jour le provider
Étape 5 : Mettre à jour chaque consommateur (class components → contextType, function components → useContext)
Étape 6 : Vérifier - lancer l'app, vérifier qu'aucun avertissement de context hérité ne subsiste

Commandes de Recherche

# Trouver tous les providers
grep -rn "childContextTypes\|getChildContext" src/ --include="*.js" --include="*.jsx" | grep -v "\.test\."

# Trouver tous les consommateurs
grep -rn "contextTypes\s*=" src/ --include="*.js" --include="*.jsx" | grep -v "\.test\."

# Trouver les utilisations de this.context (peut être hérité ou moderne - vérifier lequel)
grep -rn "this\.context\." src/ --include="*.js" --include="*.jsx" | grep -v "\.test\."

Fichiers de Référence

  • references/single-context.md - migration complète pour un context (thème, auth, etc.) avec provider + consommateur class + consommateur fonction
  • references/multi-context.md - apps avec plusieurs contexts hérités (providers imbriqués, plusieurs consommateurs de contexts différents)
  • references/context-file-template.md - la structure de fichier standard pour un nouveau module context

Skills similaires