Skip to main content
skillsmp

メニュー

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 prevent the most common context migration bugs.

インストールへ移動ファイルを確認

ソース情報

リポジトリ
github/awesome-copilot
ソースの最終更新活動
2026年4月9日 05:18
検出された SKILL.md の言語
英語
スター
40,553
フォーク
5,230

インストール方法

デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。

ソースファイルを確認

インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。

ファイルエクスプローラー
4 ファイル

SKILL.md を表示中

SKILL.md
ソースの指示 · 読み取り専用プレビュー
name
react18-legacy-context
description
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 prevent the most common context migration bugs.
# 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 -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
GitHubで見る
検索に戻るインストールに戻る