skills.rest
github
githubOFFICIAL
Explore all skills by this author →
WebsiteGitHub

react18-legacy-context

Migrates React legacy context API to the modern createContext API across providers and consumers.

38.5k|4.9k|Updated Jun 11, 2025
Search Tags:#legacy code#Refactoring#context api#createContext#reAct#Migration#React 18
One-click install
npx skills add https://github.com/github/awesome-copilot --skill react18-legacy-context
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react18-legacy-context
Source: https://github.com/github/awesome-copilot/tree/main/skills/react18-legacy-context
Command: npx skills add https://github.com/github/awesome-copilot --skill react18-legacy-context

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Migrating React legacy context (contextTypes, childContextTypes, getChildContext) to the modern createContext API is a cross-file operation where updating only the provider or only some consumers leaves the app broken at runtime. This Skill provides the complete coordinated migration pattern so no consumer is missed.

Core Features & Use Cases

  • Cross-File Migration Workflow: Enforces a strict order - find providers, find all consumers, create the context file, update the provider, then update every consumer.
  • Scan Commands: Provides grep commands to locate all childContextTypes, contextTypes, and this.context usages in a codebase.
  • Reference Guides: Includes complete before/after examples for single-context migration, multi-context apps with nested providers, and a standard context file template.
  • Use Case: When upgrading a React 16/17 class-component codebase to React 18 or preparing for React 19 (where legacy context is removed), use this Skill to migrate a theme or auth context without breaking any consumers.

Quick Start

Use the react18-legacy-context skill to migrate the legacy contextTypes and childContextTypes code in my src/ directory to the modern createContext API.

Frequently Asked Questions about react18-legacy-context

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I migrate React legacy context to createContext?▼

Create a new context file with React.createContext, update the provider to use Context.Provider with a value prop, and update each consumer to use static contextType (class) or useContext (function). All providers and consumers must be migrated together to avoid runtime failures.

How do I find all legacy context usage in a React codebase?▼

Run grep for childContextTypes and getChildContext to find providers, and grep for contextTypes to find consumers. Also search for this.context usages and check whether each reads from legacy or modern context.

Is legacy context removed in React 19?▼

Yes. Legacy context (contextTypes, childContextTypes, getChildContext) was deprecated in React 16.3, warns in React 18.3.1, and is removed in React 19, so migration to createContext is required before upgrading.

Can a class component consume multiple contexts with contextType?▼

No. A class component can only declare one static contextType. For multiple contexts, use nested Context.Consumer render props, or convert the component to a function component that calls useContext for each context.

Why does my app break after migrating only the context provider?▼

Context migration is cross-file: updating the provider without updating every consumer leaves consumers reading from the removed legacy context, returning undefined. Migrate the provider and all consumers together, then verify no legacy context warnings remain.

Related Skills

Explore More Software Engineering Skills→
p-o-ke-naep-o-ke-nae

react-modernization

Upgrade React versions, refactor class components to hooks, and adopt concurrent rendering patterns.

Community
Advanced
djankiesdjankies

migrating-from-forwardref

Migrate deprecated forwardRef usage to the ref-as-prop pattern in React 19.

Community
Intermediate
saddam-eng-techsaddam-eng-tech

class-to-hooks

Convert React class components to functional components using hooks.

Community
Advanced
nccasianccasia

react-state-management

Guide modern React state management with Redux Toolkit, Zustand, Jotai, and React Query.

Official
Advanced