Class lifecycle methods and useEffect aim at the same problem — running side effects — but they think about it differently. The hooks shift is conceptual, not just syntactic.

Class lifecycle — by moment

A single concern (e.g., subscribe to user.id) lives in three places:

componentDidMount() { subscribe(this.props.userId); }
componentDidUpdate(prev) {
  if (prev.props.userId !== this.props.userId) {
    unsubscribe(prev.props.userId);
    subscribe(this.props.userId);
  }
}
componentWillUnmount() { unsubscribe(this.props.userId); }

useEffect — by synchronization

You describe the effect and its cleanup in one place; React runs it whenever the dependencies change, with cleanup before each re-run and before unmount:

useEffect(() => {
  subscribe(userId);
  return () => unsubscribe(userId);
}, [userId]);

This co-locates what to set up and how to tear it down. The mental model shifts from "do X at moment Y" to "keep this side effect synchronized with these inputs."

Mapping the lifecycles

Why hooks won

• Co-location — one effect, one place, including cleanup.
• Composition — wrap an effect into a custom hook (useSubscribe(userId)) and reuse.
• No this — no method binding, no this.props snapshots leaking across renders.
• Effects respond to deps, not lifecycle moments — bugs from forgotten componentDidUpdate branches go away when the deps array is honest.

The trap

The biggest hook gotcha is stale closures — effects capture values from the render they ran in. The deps array is how you tell React "re-sync when these change." Lint enforces it.

Interview framing

"Class lifecycles split a single concern — subscribe to userId — across three methods: didMount, didUpdate with a prev-prop guard, and willUnmount. useEffect lets you write it once: setup, return cleanup, list the deps. The mental shift is from 'do X at moment Y' to 'keep this effect synchronized with these inputs.' The cost is the closure model — effects see the values from their render, so the deps array has to be complete or you get staleness."