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

Herramientas para Desarrolladores

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

Acerca de

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.

Características Principales

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

Casos de Uso

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

Acerca de

Características Principales

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

Casos de Uso

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