Migrate React class components to hooks
Converting class components to hooks improves readability and unlocks modern React features. Do it incrementally, component by component, with tests as the safety net.
Pattern modernizationDifficulty: moderatelow risk
Last verified · Updated May 22, 2026
Converting class components to function components with hooks is a low-risk, incremental modernization. Map lifecycle methods to effects, this.state to useState/useReducer, and convert one component at a time behind passing tests.
Transformation rules
| Class pattern | Hook equivalent |
|---|---|
| this.state / setState | useState or useReducer |
| componentDidMount | useEffect(fn, []) |
| componentDidUpdate | useEffect(fn, [deps]) |
| componentWillUnmount | useEffect cleanup return |
| this.context | useContext |
When the pattern applies
- Components with simple-to-moderate lifecycle logic.
- Components you are already touching for an upgrade.
Edge cases
- getDerivedStateFromProps rarely maps cleanly — reconsider the data flow.
- Error boundaries must remain class components (no hook equivalent yet).
- Beware effect dependency arrays re-running side effects.
Related paths
- Migrate AngularJS to Reacthigh riskEarlier step in the upgrade chain
- React 16 to React 19 Migration Guidehigh riskRelated path
- React 17 to React 19 Migration Guidehigh riskRelated path
- React 18 to React 19 Migration Guidemedium riskRelated path
- Upgrade to React 19medium riskNext step forward
- Fix React Hydration Errorsmedium riskNext step forward