React Modernization

Handles the messy work of upgrading React codebases from legacy versions to React 18. Migrates class components to hooks, updates lifecycle methods to useEffect patterns, and implements concurrent features like transitions and Suspense. Includes automated codemods for bulk transformations and handles breaking changes between React 16, 17, and 18. The concurrent features section is especially solid for teams wanting to adopt startTransition and automatic batching. Most valuable when you're sitting on an older React codebase and need a systematic approach rather than piecemeal updates.

skills.sh installs: 13.1K
GitHub stars: 42.4K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add wshobson/agents --skill react-modernization --agent claude-code

Installs into .claude/skills of the current project.

Files

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

// Before: Class component
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
      name: "",
    };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

SKILL.md on GitHub