React18 Legacy Context

React 18 legacy context migration

Coordinate the cross-file migration from React legacy context to modern createContext by finding the provider, every consumer, the new context module, and verification steps before editing any single file.

When to invoke

• "Migrate this React legacy context to createContext."
• "Remove contextTypes and childContextTypes from these components."
• "Update getChildContext before React 19."
• "Fix React 18 legacy context warnings."
• "Convert class context consumers to contextType or useContext."

Migration facts

Legacy context was deprecated in React 16.3, warns in React 18.3.1, and is removed in React 19.

Scan commands

# 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\."

Procedure

1. Find the provider by scanning for childContextTypes and getChildContext.
2. Find all consumers by scanning for contextTypes and related this.context usage.
3. Create the context file using the standard shape from references/context-file-template.md.
4. Update the provider to render the modern context provider with the correct value.
5. Update each class consumer to contextType or a context consumer, and each function component to useContext.
6. Verify the app and confirm no legacy context warnings remain.

Cross-file coordination rules

Progressive disclosure and bundled resources

• references/single-context.md: complete migration for one context such as theme or auth, including provider, class consumer, and function consumer.
• references/multi-context.md: nested providers and consumers of different contexts.
• references/context-file-template.md: standard file structure for a new context module.

Gotchas

• This is always a cross-file migration: migrating only the provider or only consumers causes runtime failure.
• Class components support only one contextType: use consumers or wrapper components for multiple contexts.
• this.context is ambiguous: inspect whether it comes from legacy contextTypes or modern contextType before editing.
• React 18 warnings are future failures: React 19 removes the legacy API.

Output template

### React legacy context migration

**Status:** complete | needs consumers | blocked
**Context:** `<context name>`
**Provider:** `<file path>`
**Consumers updated:** `<count>`

| File | Role | Change |
| --- | --- | --- |
| `<path>` | provider | `getChildContext` to provider `value` |
| `<path>` | class consumer | `contextTypes` to `contextType` |
| `<path>` | function consumer | legacy access to `useContext` |

**Validation**
- Provider scan: `<command/result>`
- Consumer scan: `<command/result>`
- React warnings: none | remaining

Quality gate

• Provider scan for childContextTypes and getChildContext was run.
• Consumer scan for contextTypes was run.
• this.context usage was audited for legacy versus modern context.
• A context file was created or reused with createContext.
• Provider and every consumer were updated in the same migration.
• Class components use contextType or consumers; function components use useContext.
• Multiple-context consumers follow references/multi-context.md rather than invalid multiple contextType assignments.
• Verification confirms no legacy context warnings remain.