Can it help migrate JavaScript React code to TypeScript?

Absolutely. It provides specific patterns for defining Component props interfaces and converting generic functional components to TypeScript.

How does it handle complex lifecycle methods during migration?

It provides standardized mapping patterns to convert componentDidMount, componentDidUpdate, and componentWillUnmount into the useEffect hook, including cleanup logic.

Does this skill support automated refactoring?

Yes, it includes instructions for utilizing jscodeshift and official React codemods to automate renaming unsafe lifecycles and updating JSX transforms.

Does this skill support React 18 concurrent features?

Yes, it includes detailed implementation guides for the New Root API, automatic batching, transitions via useTransition, and Suspense for data fetching.

React Modernization

Name: React Modernization
Author: HermeticOrmus

byHermeticOrmus

Developer Tools

Upgrades legacy React applications to modern versions and migrates class components to functional components using hooks.

About

This skill provides a comprehensive toolkit for modernizing React codebases, ranging from version-specific upgrades (React 16 to 18+) to converting complex class-based components into modern functional components with hooks. It streamlines the adoption of React 18's concurrent features—such as Suspense, transitions, and automatic batching—while offering automated refactoring patterns through codemods, TypeScript migration strategies, and performance optimizations like memoization and code splitting.

Key Features

Automated class-to-functional component migration patterns
Step-by-step upgrade checklists for React 16, 17, and 18
0 GitHub stars
TypeScript migration templates for legacy JavaScript components
React 18 concurrent feature implementation (Transitions, Suspense)
Standardized codemod application for bulk refactoring

Use Cases

Upgrading a legacy React 16 enterprise application to React 18 and the new Root API
Refactoring complex lifecycle-heavy components to clean, hook-based logic
Improving application responsiveness by implementing transitions for non-urgent state updates

About

Key Features

Automated class-to-functional component migration patterns
Step-by-step upgrade checklists for React 16, 17, and 18
0 GitHub stars
TypeScript migration templates for legacy JavaScript components
React 18 concurrent feature implementation (Transitions, Suspense)
Standardized codemod application for bulk refactoring

Use Cases

Upgrading a legacy React 16 enterprise application to React 18 and the new Root API
Refactoring complex lifecycle-heavy components to clean, hook-based logic
Improving application responsiveness by implementing transitions for non-urgent state updates