mcpField
R
react18-legacy-context

react18-legacy-context

github.com/githubDevelopment40.5k746 installsUpdated today
Repository

About react18-legacy-context

A migration skill for replacing React legacy context with the modern context API. It emphasizes coordinating the context module, provider, and every consumer, with scan commands and reference examples to help avoid incomplete cross-file changes.

Key features

  1. 01Locate legacy providers and consumers
  2. 02Coordinate cross-file migration steps
  3. 03Create a context module
  4. 04Update class and function consumers
  5. 05Verify removal of legacy warnings

Use cases

  1. 01Preparing a React app for React 19
  2. 02Migrating a single legacy context
  3. 03Updating apps with multiple contexts
  4. 04Checking for missed context consumers

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/github/awesome-copilot --skill react18-legacy-context

After installing, type/react18-legacy-contextin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/
context-file-template.md
multi-context.md
single-context.md

Details

From the project README

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

# 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

Comments

Markdown supported