Agent skill · software engineering · aiskillstore
react-modernization
Upgrade React applications to latest versions, migrate from class components to hooks, and adopt concurrent features. Use when modernizing React codebases, migrating to React Hooks, or upgrading to latest React versions.
Why this skill is useful
Provides specific codemods and migration patterns for upgrading React applications that the AI wouldn't reliably generate on its own.
What it needs
About 6k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
React Modernization Master React version upgrades, class to hooks migration, concurrent features adoption, and codemods for automated transformation. When to Use This Skill Upgrading React applications to latest versions Migrating class components to functional components with hooks Adopting concurrent React features (Suspense, transitions) Applying codemods for automated refactoring Modernizing state management patterns Updating to TypeScript Improving performance with React 18+ features Version Upgrade Path React 16 → 17 → 18 Breaking Changes by Version: React 17: Event delegation changes No event pooling Effect cleanup timing JSX transform (no React import needed) React 18: Automatic batching Concurrent rendering Strict Mode changes (double invocation) New root API Suspense on server Class to Hooks Migration State Management Lifecycle Methods to Hooks Context and HOCs to Hooks React 18 Concurrent Features New Root API Automatic Batching Transitions Suspense for Data Fetching Codemods for Automation Run React Codemods Custom Codemod Example Performance Optimization useMemo and useCallback Code Splitting TypeScript Migration Migration Checklist Resources references/breaking-changes.md: Version-specific breaking changes references/codemods.md: Codemod usage guide references/hooks-migration.md: Comprehensive hooks patterns references/concurrent-features.md: React 18 concurrent features assets/codemod-config.json: Codemod configurations assets/migration-checklist.md: Step-by-step checklist scripts/apply-codemods.sh: Automated codemod script Best Practices 1. Incremental Migration: Don't migrate everything at once 2. Test Thoroughly: Comprehensive testing at each step 3. Use Codemods: Automate repetitive transformations 4. Start Simple: Begin with leaf components 5. Leverage StrictMode: Catch issues early 6. Monitor Performance: Measure before and after 7. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/react-modernization--4b95ef