Hint
Mount → Update → Unmount — useEffect covers all three phases
Class components had explicit lifecycle methods. Hooks cover the same phases:
| Class method | Hook equivalent |
|---|---|
| componentDidMount | useEffect(() => { ... }, []) |
| componentDidUpdate | useEffect(() => { ... }, [deps]) |
| componentWillUnmount | useEffect(() => { return () => cleanup() }, []) |
| shouldComponentUpdate | React.memo + useMemo |
| getDerivedStateFromProps | Compute during render (no hook needed) |
| getSnapshotBeforeUpdate | useLayoutEffect return value (rare) |
useEffect(() => {
// componentDidMount — runs after first render
const sub = subscribe(userId);
// componentWillUnmount — cleanup function
return () => sub.unsubscribe();
}, []); // [] = run once
useEffect(() => {
// componentDidUpdate for userId — runs when userId changes
fetchUser(userId);
}, [userId]);