React Modernization

The react-modernization skill automates the upgrade of legacy React codebases to modern standards, specifically targeting Class components and older lifecycle methods. It generates updated functional components with hooks like useState, useEffect, and useRef while preserving existing logic and styling.

When to use it

• Migrating large monorepos containing hundreds of Class-based components to the Functional Component paradigm.
• Refactoring codebases relying on deprecated lifecycle methods (e.g., componentDidMount) for better performance and readability.
• Preparing legacy applications for new React versions that have dropped support for older syntax.
• Standardizing a mixed codebase where some files use classes while others use hooks.

Key capabilities

• Converts ES6 Class components into modern Functional Components.
• Translates lifecycle methods (componentDidMount, componentWillUnmount) into equivalent useEffect hooks.
• Replaces state management patterns with the useState hook.
• Handles prop drilling and context updates during the transformation process.

Example prompts

• "Modernize this legacy React folder containing 50 Class components to use hooks."
• "Refactor my entire project to remove all extends React.Component usage and replace it with functional syntax."
• "Update these specific files to convert componentDidMount logic into useEffect dependencies."

Tips & gotchas

Ensure you have a robust backup before running this on production code, as automated refactoring can occasionally alter edge-case logic. Review the generated hooks carefully to ensure dependency arrays in useEffect are correctly inferred from the original lifecycle methods.