How do class lifecycle methods map to hooks?
Take a moment.
Say your answer out loud or write it down first — retrieval is what makes it stick. Reveal when you're ready.
Short answer
componentDidMount ≈ useEffect(fn, []), componentDidUpdate ≈ useEffect without deps (or with deps), componentWillUnmount ≈ a cleanup function returned from useEffect. Hooks unify these into one API tied to synchronization, not lifecycle stages.
Detailed explanation
Classes split logic by *when* it runs: componentDidMount for setup, componentDidUpdate for reacting to changes, componentWillUnmount for teardown — often scattering one concern across three methods. useEffect merges them around *what* you're synchronizing with: one effect per concern, with a dependency array deciding when it re-runs and a returned function handling cleanup before the next run and on unmount. So subscribing to a websocket lives in one effect (subscribe on mount, unsubscribe on cleanup), regardless of how many times deps change. ShouldComponentUpdate corresponds to React.memo (props) and useMemo/useCallback (values/functions). getDerivedStateFromProps is intentionally unsupported — derive during render instead. componentDidCatch maps to Error Boundaries, which remain class-only (or library wrappers).
Official docs:React docs: Synchronizing with Effects
Example
// Class version spread over 3 methods:
class Chat extends React.Component {
componentDidMount() { subscribe(this.props.room); }
componentDidUpdate(prev) {
if (prev.room !== this.props.room) {
unsubscribe(prev.room); subscribe(this.props.room);
}
}
componentWillUnmount() { unsubscribe(this.props.room); }
}
// Same concern as one effect:
useEffect(() => {
const conn = subscribe(room);
return () => unsubscribe(conn);
}, [room]);Interview tip
Present the mapping table fast, then make the conceptual point — effects synchronize with external systems, they aren't lifecycles. That reframing is what interviewers score.
Common mistakes
- Treating useEffect(fn, []) as literally 'didMount' and ignoring cleanup timing.
- Claiming there's a hook equivalent for componentDidCatch.