react18-legacy-context
Provides the complete migration pattern for React legacy context API (contextTypes, childContextTypes, getChildContext) to the modern createContext API. Use this skill whenever migrating legacy context in class components - this is always a cross-file migration requiring the provider AND all consumers to be updated together. Use it before touching any contextTypes or childContextTypes code, because migrating only the provider without the consumers (or vice versa) will cause a runtime failure. Always read this skill before writing any context migration - the cross-file coordination steps here p
Profile →npx skills add github/awesome-copilot --skill react18-legacy-context --agent copilot
Same command for any agent — swap --agent for claude-code, codex, cursor.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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: 1. Create the context object (usually a new file) 2. Update the **provider** component 3. 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 ```bash # 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 -
- This Is Always a Cross-File Migration
- Migration Steps (Always Follow This Order)
- Scan Commands
- Reference Files
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\."
What does the react18-legacy-context skill do?
Provides the complete migration pattern for React legacy context API (contextTypes, childContextTypes, getChildContext) to the modern createContext API. Use this skill whenever migrating legacy context in class components - this is always a cross-file migration requiring the provider AND all consumers to be updated together. Use it before touching any contextTypes or childContextTypes code, because migrating only the provider without the consumers (or vice versa) will cause a runtime failure. Always read this skill before writing any context migration - the cross-file coordination steps here p
How do I install it?
Run `npx skills add github/awesome-copilot --skill react18-legacy-context --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From github/awesome-copilot, a repository with 37,432 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.