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 :
- Créer l'objet context (généralement un nouveau fichier)
- Mettre à jour le composant provider
- 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 fonctionreferences/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