Lifecycle methods and their hook equivalents

Model answer. A component goes through three phases:

1. Mounting (first appears): constructor → render → componentDidMount.
2. Updating (props or state change): render → componentDidUpdate(prevProps, prevState). shouldComponentUpdate can skip a render.
3. Unmounting (removed): componentWillUnmount.

Plus error handling: componentDidCatch / static getDerivedStateFromError (error boundaries).

Hook equivalents:

useEffect(() => { /* componentDidMount */ return () => { /* componentWillUnmount */ }; }, []);
useEffect(() => { /* componentDidUpdate for userId */ }, [userId]);
const Fast = React.memo(Slow);   // roughly shouldComponentUpdate

The mental model shifts, though. Class lifecycles are about moments in time ("when mounted, do X"). Effects are about synchronisation ("keep this subscription in sync with userId"). One effect with a cleanup replaces logic that used to be split across componentDidMount, componentDidUpdate and componentWillUnmount, and it is harder to forget the update case.

Error boundaries still need a class component (or a small library such as react-error-boundary).