Modernize React Applications with Hooks and Codemods

Guides React version upgrades, class-to-hooks migration, concurrent React feature adoption, and codemod-based automated transformation.

Use this skill when upgrading a React application to a newer version, 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, or improving performance with React 18+ features. Not a fit for tasks unrelated to React modernization.

Covers version upgrade planning for existing React applications, converting class components (lifecycle methods, this.state) to functional components using hooks (useState, useEffect, custom hooks), adopting concurrent features introduced in React 18+ such as Suspense boundaries for data fetching/code splitting and transitions (useTransition, startTransition) for non-urgent state updates, applying codemods to automate repetitive refactoring across a codebase rather than doing it file-by-file manually, modernizing state management patterns (moving away from older patterns toward current idiomatic approaches), incrementally introducing TypeScript into a JavaScript React codebase, and applying React 18+ performance features to existing code. Points to a detailed implementation playbook for concrete migration patterns and codemod examples when deeper guidance beyond the core workflow is needed.

React developers upgrading legacy applications who need structured guidance for version migration, hooks conversion, and concurrent feature adoption rather than an ad hoc rewrite.