React Class to Hooks Migration Checklist
A migration checklist for converting React class components to hooks. It covers lifecycle-to-effect mapping, custom hooks, dependency-array correctness, incremental rollout, and test safety nets.
When to Use This Checklist
Use this checklist before migrating React class components to function components with hooks. Hooks simplify state and side effects, enable reusable logic through custom hooks, and align with modern React APIs. The migration is incremental by nature, so this list focuses on doing it safely without regressions.
How to Use This Checklist
Start by inventorying class components and ranking them by complexity and usage. Begin with simple, low-traffic components to build patterns before tackling complex ones. Map lifecycle methods to their hook equivalents up front, since componentDidMount, componentDidUpdate, and cleanup collapse into useEffect with the right dependencies.
Protect behavior with tests before refactoring. The most common hooks bug is an incorrect effect dependency array, which causes stale closures or extra renders, so review every effect's dependencies carefully. Enable the hooks lint rules to enforce the rules of hooks automatically.
Migrate incrementally. Class and function components coexist freely, so there is no need for a big-bang conversion. Convert higher-order components and render props into custom hooks to capture the real reuse benefit, and remember that error boundaries still require class components.
What Good Looks Like
Components are migrated incrementally with class and function components coexisting. Lifecycle logic is correctly translated to effects with accurate dependency arrays, shared logic is extracted into custom hooks, and the hooks lint rules are enforced. Tests and visual regression checks confirm no behavior or appearance regressions, and performance is verified by profiling.
Common Pitfalls
The top pitfall is wrong effect dependency arrays causing stale data or render loops. Teams also try a big-bang rewrite when an incremental migration is safer and faster. Forgetting that error boundaries remain class-only leads to confusion. Skipping tests before refactoring removes the safety net the migration depends on.
Related Resources
Pair this with component-driven development, test-driven development, and code-review best practices. Visual regression testing guards appearance, and trunk-based development supports incremental merges. See the React class-to-hooks migration.