⚛️ React Component Lifecycle
Class Component Execution Sequence — click any method to learn more
① Mounting
constructor(props)
↓
getDerivedStateFromProps()
↓
render()
↓
componentDidMount()
② Updating
getDerivedStateFromProps()
↓
shouldComponentUpdate()
↓ (if true)
render()
↓
getSnapshotBeforeUpdate()
↓
componentDidUpdate()
③ Unmounting
componentWillUnmount()
New in 16.3+
Conditional step
👆 Click any method box above to see its purpose and a code example.
Yellow arrow means the step is skipped if shouldComponentUpdate() returns false
① Mounting
getDefaultProps()
↓
getInitialState()
↓
componentWillMount()
↓
render()
↓
componentDidMount()
② Updating
componentWillReceiveProps()
↓
shouldComponentUpdate()
↓ (if true)
componentWillUpdate()
↓
render()
↓
componentDidUpdate()
③ Unmounting
componentWillUnmount()
Legacy / Deprecated
👆 Click any method box above to see its purpose and a code example.
| Phase | Legacy Method | Modern Replacement | Notes |
|---|---|---|---|
| Mount | getDefaultProps()removed | static defaultProps = {} | Class property or function default params |
| Mount | getInitialState()removed | constructor() { this.state={} } | Also: hooks useState() |
| Mount/Update | componentWillMount()unsafe | getDerivedStateFromProps()16.3 | Renamed UNSAFE_componentWillMount; avoid side-effects |
| Update | componentWillReceiveProps()unsafe | getDerivedStateFromProps() | Static — no access to this |
| Update | componentWillUpdate()unsafe | getSnapshotBeforeUpdate()16.3 | Runs after render, before DOM commit |
| Mount/Update | — | useEffect()hooks | Combines didMount + didUpdate + willUnmount in function components |
| All | Class Component | Function Component + Hooks | Preferred approach in modern React |
