Careeroza
Lifecycle Phases
Three Phases
MOUNTING component is created and inserted into the DOM ↓ UPDATING props or state change → re-render (can happen many times) ↓ UNMOUNTING component is removed from the DOM
| Phase | Class component | Function component |
|---|---|---|
| Mount | constructor → render → componentDidMount | render → useEffect(fn, []) |
| Update | render → componentDidUpdate(prevProps, prevState) | render → useEffect(fn, [deps]) |
| Unmount | componentWillUnmount | cleanup returned from useEffect |
| Skip re-render | shouldComponentUpdate / PureComponent | React.memo |
| Errors | componentDidCatch / getDerivedStateFromError | no hook: use a class error boundary |