Skills
.Work. You
Rest

class-to-hooks

Community

Convert React class to hooks

Software Engineering#typescript#refactoring#react#javascript#hooks#component conversion
Authorsaddam-eng-tech
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill automates the conversion of legacy React class components into modern functional components using hooks, reducing technical debt and improving code maintainability.

Core Features & Use Cases

  • Lifecycle Method Mapping: Accurately translates componentDidMount, componentDidUpdate, and componentWillUnmount to useEffect patterns.
  • State Management Conversion: Transforms this.state and this.setState into useState and its setter functions.
  • Instance Method Refactoring: Converts class methods into functional components, using useCallback where necessary.
  • Ref and Context Handling: Migrates createRef to useRef and contextType to useContext.
  • Use Case: Refactor an older React codebase to leverage functional components and hooks, making it easier to work with and test.

Quick Start

Convert the provided React class component to a functional component using hooks.

Dependency Matrix

Required Modules

None required

Components

scriptsreferences

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: class-to-hooks
Download link: https://github.com/saddam-eng-tech/ai-agent-skills/archive/main.zip#class-to-hooks

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.