react-modernization

Upgrade React versions and migrate class components to hooks via codemods.

1|Updated Dec 23, 2025

Search Tags:#typescript #react #hooks #migration #codemods #concurrency #upgrade

Ready to run

npx skills add https://github.com/ccf/claude-code-ccf-marketplace --skill react-modernization-ccf

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-modernization
Source: https://github.com/ccf/claude-code-ccf-marketplace/tree/main/plugins/refactoring/skills/react-modernization
Command: npx skills add https://github.com/ccf/claude-code-ccf-marketplace --skill react-modernization-ccf

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

Modern React codebases struggle with upgrading versions, migrating from class components to hooks, and adopting concurrent features. This Skill provides structured guidance and codemods to streamline modernization with reduced risk.

Core Features & Use Cases

Version upgrades: Guidance and tooling for React 16→17→18 upgrades with API changes and JSX transform notes.
Class-to-Hooks migration: Automated refactors to convert class components to functional components using hooks while preserving behavior.
Concurrency adoption: Patterns and codemods for Suspense, transitions, and concurrent rendering improvements.
Codemods for automation: Prebuilt transformations to accelerate modernization with minimal manual edits.

Quick Start

Install and run the codemods on your React project to begin migration, then run tests and address TypeScript typings as needed.

Frequently Asked Questions about react-modernization

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

FAQPage Schema

How do I migrate React class components to hooks automatically?▼

Upgrade React 16 to 18 by following structured upgrade paths that address API changes and JSX transform notes. Prebuilt codemods automate much of the version transition to reduce manual refactoring risk.

How do I enable concurrent rendering and Suspense in a React app?▼

Automate React modernization tasks using prebuilt codemods that handle version upgrades, class-to-hooks migration, and concurrency adoption. These transformations accelerate modernization across large and small frontend projects with reduced risk.

Can I use codemods to upgrade React and migrate TypeScript typings at the same time?▼

React modernization suits both large and small frontend applications undergoing performance improvements and TypeScript migrations. It provides structured guidance and tooling to streamline upgrades with reduced risk.

What are the limitations of using codemods for React hooks migration?▼

Codemods for React hooks migration accelerate modernization with minimal manual edits, but you must run tests and address TypeScript typings afterward to ensure behavior is preserved and typings are correct.