React 18 Legacy Context Migration

Legacy context (contextTypes, childContextTypes, getChildContext) was deprecated in React 16.3 and warns in React 18.3.1. It is removed in React 19.

This Is Always a Cross-File Migration

Unlike most other migrations that touch one file at a time, context migration requires coordinating:

Create the context object (usually a new file)
Update the provider component
Update every consumer component

Missing any consumer leaves the app broken - it will read from the wrong context or get undefined.

Migration Steps (Always Follow This Order)

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

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

Reference Files

references/single-context.md - complete migration for one context (theme, auth, etc.) with provider + class consumer + function consumer
references/multi-context.md - apps with multiple legacy contexts (nested providers, multiple consumers of different contexts)
references/context-file-template.md - the standard file structure for a new context module

Files4

4 files · 15.0 KB

Select a file to preview

Overall Score

89/100

Grade

A

Excellent

Safety

92

Quality

88

Clarity

90

Completeness

84

Summary

This skill provides a complete migration pattern for React's deprecated legacy context API (contextTypes, childContextTypes, getChildContext) to the modern createContext API. It emphasizes that context migration is always a cross-file operation requiring coordinated updates to providers, all consumers, and the context definition — a critical insight that prevents common runtime failures.

Detected Capabilities

code pattern analysisfile scanning via grepreference examplesbefore/after code samples

Trigger Keywords

Phrases that MCP clients use to match this skill to user intent.

migrate legacy contextcontextTypes to contextTypereact context refactorupgrade react contextcontext api migration

Use Cases

Migrate legacy context to React 18/19 modern API
Update class components from contextTypes to contextType
Convert function components to useContext hooks
Handle multiple legacy contexts in a single app
Refactor apps with nested legacy context providers
Prevent runtime errors when only updating providers or consumers

Quality Notes

Excellent cross-file coordination emphasis prevents the most common context migration bugs
Clear step-by-step migration order (find provider, find consumers, create context, update both)
Three comprehensive reference files cover single context, multiple contexts, and file template patterns
Practical grep commands for finding legacy context patterns in codebases
Detailed before/after examples for both class and function component consumers
Addresses edge cases: multiple contexts in one class component, multiple contexts in one provider, nested providers, context placement strategy
React 18 and 19 syntax differences explicitly documented
Verification checklists help confirm migration completeness
Notes on custom hook pattern (useAuth, useTheme) for cleaner consumption
Explains both render-prop and function-component conversion options for classes consuming multiple contexts

Model: claude-haiku-4-5-20251001Analyzed: Jun 26, 2026

Reviews

Add this skill to your library to leave a review.

No reviews yet

Be the first to share your experience.

react18-legacy-context