Ask Claude to Convert Class Components to Function Components with Hooks

Class components still work in React, but they're harder to read, don't compose as well, and miss out on the hooks ecosystem. Claude Code can convert them to function components while preserving every behavior — not just the syntax, but the actual lifecycle semantics.

Convert all class components in src/components/ to function components with hooks. 
Map lifecycle methods to useEffect correctly and preserve the exact same behavior. 
Update the tests to match.

Claude handles the tricky mappings that trip people up:

// Before: class component
class UserProfile extends Component {
  state = { user: null, loading: true };

  componentDidMount() {
    this.fetchUser();
  }

  componentDidUpdate(prevProps) {
    if (prevProps.userId !== this.props.userId) {
      this.fetchUser();
    }
  }

  componentWillUnmount() {
    this.controller.abort();
  }
}

// After: function component with hooks
function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const controller = new AbortController();
    fetchUser(userId, controller.signal).then(setUser).finally(() => setLoading(false));
    return () => controller.abort();
  }, [userId]);
}

Target different conversion complexities:

# Simple components first
Convert the stateless class components in src/components/ui/ — 
these just render props and don't need hooks at all.

# Components with state and lifecycle
Convert UserDashboard. It has componentDidMount, componentDidUpdate, 
and componentWillUnmount — map each lifecycle to the correct useEffect pattern.

# Components with refs
Convert the form components that use createRef to useRef.

# HOC patterns to hooks
The components wrapped in withRouter and connect can use 
useNavigate and useSelector instead. Remove the HOC wrappers.

After converting, ask Claude to verify:

Run the tests for the converted components. If any tests rely on 
class-specific APIs like instance() or setState(), update them 
to test the function component equivalently.

Class components are React's past. Hooks are React's present — let Claude handle the conversion so you get modern components without rewriting from scratch.

via Claude Code