skills.rest
ratnesh-maurya
ratnesh-mauryaCOMMUNITY
Explore all skills by this author →
Website𝕏@_ratneshmauryaGitHub

react-modernization

Migrate React codebases to hooks, concurrent features, and latest versions using codemods.

1|Updated Aug 17, 2025
Search Tags:#typescript#refactoring#react#hooks#migration#codemod#react 18
One-click install
npx skills add https://github.com/ratnesh-maurya/mdconverter --skill react-modernization-ratnesh-maurya
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-modernization
Source: https://github.com/ratnesh-maurya/mdconverter/tree/main/.claude/skills/react-modernization
Command: npx skills add https://github.com/ratnesh-maurya/mdconverter --skill react-modernization-ratnesh-maurya

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Legacy React codebases built on class components, outdated lifecycle methods, and older React versions are hard to maintain and miss out on modern performance features. This Skill provides structured guidance, code patterns, and codemod commands to upgrade React versions and modernize component architecture. ## Core Features & Use Cases - Class to Hooks Migration: Convert class components, lifecycle methods, context consumers, and HOCs into functional components with useState, useEffect, useContext, and custom hooks. - React 18 Upgrade Guidance: Adopt the createRoot API, automatic batching, transitions, and Suspense for data fetching with step-by-step breaking change notes. - Automated Codemods: Run jscodeshift and react-codeshift transforms to rename unsafe lifecycles and apply the new JSX transform at scale. - Use Case: You inherit a React 16 application full of class components. Use this Skill to incrementally upgrade to React 18, convert components to hooks, and apply performance optimizations like useMemo and code splitting. ## Quick Start Use the react-modernization skill to migrate my class components in src/ to functional components with hooks and upgrade the app to React 18.

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?▼

Convert this.state to useState, lifecycle methods like componentDidMount and componentDidUpdate to useEffect with proper dependency arrays, and context consumers to useContext. Start with leaf components and extract reusable logic into custom hooks.

How to upgrade a React app from version 16 or 17 to React 18?▼

Update react and react-dom packages, replace ReactDOM.render with the createRoot API from react-dom/client, and test with StrictMode to catch double-invocation issues. Upgrade incrementally through React 17 if coming from older versions.

What codemods automate React class to hooks migration?▼

Use jscodeshift with react-codeshift transforms such as rename-unsafe-lifecycles and new-jsx-transform for automated refactoring. Third-party codemods can convert class components to functions, though manual review is recommended for complex state logic.

Does React 18 automatic batching change setState behavior?▼

Yes, React 18 batches all state updates including those inside setTimeout, promises, and native event handlers, reducing re-renders. Use flushSync from react-dom to opt out when synchronous rendering is required.

When should I not use useMemo and useCallback?▼

Avoid them when the computation is cheap or dependencies change frequently, since memoization adds overhead and complexity. Apply them only after profiling identifies actual performance bottlenecks from expensive calculations or child re-renders.

Related Skills

Explore More Software Engineering Skills→
AI-Foundry-CoreAI-Foundry-Core
4

react-modernization

Migrate React class components to functional components using hooks.

Official
Advanced
lovecrushfamilylovecrushfamily
1

vc-web-testing

Automate web application testing with Playwright, Vitest, and k6.

Community
Advanced
mindcockpit-aimindcockpit-ai
11

react-patterns

Enforce modern React and TypeScript coding standards via static analysis.

Official
Intermediate
ACGSpgpACGSpgp

angular-migration

Migrate AngularJS applications to Angular with hybrid mode support.

Official
Advanced