React Class to Hooks Converter

What this skill does

Rewrites one React class component as an idiomatic function component with hooks. The translation preserves the order in which lifecycle effects run and the identity semantics of refs, so the converted component is drop-in.

Inputs

• component_path: path to the .jsx or .tsx file containing exactly one class component.
• repo_dir: repo root for running tests after conversion.
• Optional test_path: a Jest/RTL test that exercises the component, used as a regression gate.

Steps

1. Parse the file with ast-grep or @typescript-eslint/parser and locate the class declaration.
2. Inventory: state shape, props interface, constructor (for binding/initial state), componentDidMount, componentDidUpdate, componentWillUnmount, getDerivedStateFromProps, componentDidCatch, shouldComponentUpdate, instance fields, refs.
3. Map state: each top-level state field becomes its own useState call. Keep the same setter naming (count -> setCount).
4. Map mount/unmount: combine componentDidMount + componentWillUnmount into a single useEffect(..., []) whose return value is the unmount cleanup.
5. Map componentDidUpdate(prevProps, prevState): split into useEffect blocks keyed on the actual dependencies that the body reads. Avoid one giant effect.
6. Map getDerivedStateFromProps: prefer deriving the value during render; only fall back to a useState + useEffect mirror if the prop is expensive to recompute.
7. Replace this.refs and createRef with useRef. Forward refs via forwardRef if the parent passes one.
8. Replace shouldComponentUpdate with React.memo plus a custom areEqual if the original logic warrants it.
9. Move instance methods to closures inside the component or to module-level helpers if they don't close over state.
10. Run eslint --fix and prettier --write over the new file.
11. Run the test suite for the file: npx jest <test_path>.

Output

The original component_path rewritten as a function component, with a sibling <name>.migration-notes.md listing each lifecycle that was mapped and the new hook it became.

Verification

Run the test suite before and after; assertion counts and pass/fail must match. Render the component with React DevTools profiler in dev mode and confirm the effect-fire order matches the class version (mount, then update on relevant prop changes, then unmount). If the component used componentDidCatch, wrap the new function component in an Error Boundary class — hooks have no equivalent — and note this in the migration notes.

Edge cases

• Component uses legacy lifecycles (componentWillMount, componentWillReceiveProps): treat as red flags; their hook equivalents are not 1:1 — refactor the data flow instead.
• Class extends PureComponent: wrap with React.memo after conversion.
• componentDidCatch / getDerivedStateFromError: cannot be expressed as hooks; keep an Error Boundary class wrapper.
• Heavy use of this.setState(callback) form: replace with the functional updater form setX(prev => ...).