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

0•

Developer Tools

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

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

01Automated class-to-functional component migration patterns

02Step-by-step upgrade checklists for React 16, 17, and 18

030 GitHub stars

04TypeScript migration templates for legacy JavaScript components

05React 18 concurrent feature implementation (Transitions, Suspense)

06Standardized codemod application for bulk refactoring

Use Cases

01Upgrading a legacy React 16 enterprise application to React 18 and the new Root API

02Refactoring complex lifecycle-heavy components to clean, hook-based logic

03Improving application responsiveness by implementing transitions for non-urgent state updates

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add hermeticormus/hermetic-line react-modernization

For use in Claude.ai and ChatGPT

Download Skill