Migração de Contexto Legado do React 18

O contexto legado (contextTypes, childContextTypes, getChildContext) foi depreciado no React 16.3 e emite um aviso no React 18.3.1. Ele é removido no React 19.

Esta é Sempre uma Migração Entre Arquivos

Ao contrário da maioria das outras migrações que afetam um arquivo por vez, a migração de contexto exige coordenação:

1. Crie o objeto de contexto (geralmente um novo arquivo)
2. Atualize o componente provedor
3. Atualize cada componente consumidor

Se faltar algum consumidor, o aplicativo ficará quebrado – ele lerá do contexto errado ou receberá undefined.

Passos da Migração (Siga Sempre Esta Ordem)

Step 1: Find the provider (childContextTypes + getChildContext)
Step 2: Find ALL consumers (contextTypes)
Step 3: Create the context file
Step 4: Update the provider
Step 5: Update each consumer (class components → contextType, function components → useContext)
Step 6: Verify - run the app, check no legacy context warnings remain

Comandos de Busca

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

# Find all consumers
grep -rn "contextTypes\s*=" src/ --include="*.js" --include="*.jsx" | grep -v "\.test\."

# Find this.context usage (may be legacy or modern - check which)
grep -rn "this\.context\." src/ --include="*.js" --include="*.jsx" | grep -v "\.test\."

Arquivos de Referência

• references/single-context.md - migração completa para um contexto (tema, autenticação, etc.) com provedor + consumidor de classe + consumidor de função
• references/multi-context.md - aplicativos com múltiplos contextos legados (provedores aninhados, múltiplos consumidores de contextos diferentes)
• references/context-file-template.md - a estrutura de arquivos padrão para um novo módulo de contexto