Convert React Class Components to Functional Hooks with Claude

Still have class components lurking in your React codebase? Claude can convert them to modern functional components with hooks — lifecycle methods, state, refs, and all.

Convert this React class component to a functional component using
hooks. Replace setState with useState, componentDidMount and
componentDidUpdate with useEffect, and createRef with useRef.
Keep the exact same behaviour and prop types.

Claude maps each lifecycle method to its hook equivalent:

// Before: class component
componentDidMount() { fetchData(); }
componentDidUpdate(prevProps) {
  if (prevProps.id !== this.props.id) fetchData();
}
componentWillUnmount() { cleanup(); }

// After: functional with hooks
useEffect(() => {
  fetchData();
  return () => cleanup();
}, [id]);

For bulk migrations, ask Claude to work through a directory:

Convert all class components in src/components/legacy/ to
functional components with hooks. Preserve all existing tests.
Update any HoC wrappers to use custom hooks instead.

Claude handles the tricky parts too — converting this.setState callbacks to useEffect dependencies, replacing getDerivedStateFromProps with conditional useState, and turning class instance variables into useRef.

If your components use higher-order components like withRouter or connect, Claude replaces them with useNavigate, useSelector, and useDispatch.

Modernise your React codebase one component at a time — Claude knows every lifecycle-to-hook mapping.