ReactJSLifecycle

⚛️ 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