How to refactor legacy components with Cursor

1// Cursor Chat prompt (Cmd+L, Plan Mode via Shift+Tab):
2// @src/components/UserProfile.tsx Analyze this class component
3// and create a migration plan to convert it to a functional
4// component with hooks. For each lifecycle method, specify:
5// - Which hook replaces it (useEffect, useMemo, useCallback)
6// - Any tricky patterns that need special attention
7// - The order of operations to maintain the same behavior
8// Do NOT write code yet, just the plan.

1// Cmd+K prompt (with the full class selected):
2// Convert this class component to a functional component.
3// Step 1: Convert this.state to useState hooks.
4// Step 2: Convert this.handleXxx methods to const handlers.
5// Do NOT convert lifecycle methods yet. Keep them as comments
6// that say TODO: convert componentDidMount to useEffect.
7
8// BEFORE:
9class UserProfile extends Component<Props, State> {
10  state = { user: null, loading: true, error: null };
11  handleEdit = () => { this.setState({ editing: true }); };
12}
13
14// AFTER:
15function UserProfile({ userId }: Props) {
16  const [user, setUser] = useState<User | null>(null);
17  const [loading, setLoading] = useState(true);
18  const [error, setError] = useState<Error | null>(null);
19  const handleEdit = useCallback(() => { /* ... */ }, []);
20  // TODO: convert componentDidMount to useEffect
21}

1// Cmd+K prompt (with the TODO comment selected):
2// Convert this componentDidMount logic to useEffect.
3// The effect should fetch the user on mount.
4// Include a cleanup function to abort the fetch on unmount.
5// The dependency array should include userId.
6
7useEffect(() => {
8  const controller = new AbortController();
9  async function fetchUser() {
10    setLoading(true);
11    try {
12      const res = await fetch(`/api/users/${userId}`, {
13        signal: controller.signal,
14      });
15      const data = await res.json();
16      setUser(data);
17    } catch (err) {
18      if (err.name !== 'AbortError') setError(err as Error);
19    } finally {
20      setLoading(false);
21    }
22  }
23  fetchUser();
24  return () => controller.abort();
25}, [userId]);

1// Cursor Chat prompt (Cmd+L):
2// @src/components/ErrorBoundary.tsx This is an error boundary
3// class component. Can it be converted to a functional
4// component?
5//
6// Expected answer: No. Error boundaries require
7// getDerivedStateFromError and componentDidCatch which
8// have no hook equivalents. Keep this as a class component.
9// Wrap functional components WITH the error boundary.

1// Terminal:
2npm test -- --testPathPattern=UserProfile
3
4// If tests fail, paste errors into Cursor Chat:
5// @src/components/UserProfile.tsx The test expects the
6// component to show a loading spinner initially, but it
7// renders null. The useEffect runs after the first render
8// unlike componentDidMount which ran before paint. Fix
9// this by initializing the loading state to true.