Class → Hooks Migrator

Phase 1 — THINK

This migration's real risk isn't syntax — it's that componentDidUpdate and useEffect have different mental models, and a naive conversion silently introduces stale closures or infinite re-render loops.

• For every class component being converted, list its lifecycle methods and, critically, what each one depends on reading (props/state) at the time it runs
• Specifically check componentDidUpdate logic that does conditional work based on comparing prev/current props or state — this needs to become a useEffect with a carefully chosen dependency array, not a blind "run every update"
• Check for this.instance variables that aren't state (timers, subscriptions, mutable refs) — these map to useRef, not useState, and mixing them up is a common bug source
• Flag any component using legacy lifecycle methods (componentWillReceiveProps, componentWillMount) — these need a real redesign, not a mechanical hook swap

Phase 2 — PLAN

For each component, show before starting:

1. State → useState/useReducer mapping (recommend useReducer if there are more than ~3 interdependent state values, since that's where useState sprawl gets buggy)
2. Lifecycle → useEffect mapping, with the dependency array explicitly reasoned about per effect, not left as an afterthought
3. Instance variables → useRef mapping
4. Any behavior that's genuinely ambiguous to convert safely (e.g., subtle timing in componentDidUpdate) flagged for the user to confirm intent before converting