> For the complete documentation index, see [llms.txt](https://bharat-tiwari.gitbook.io/our-tech-journal/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bharat-tiwari.gitbook.io/our-tech-journal/react/lifecycle.md).

# Lifecycle

## React Component Lifecycle Events

`constructor (props)` Before rendering # `componentWillMount()` Don’t use this # `render()` Render # `componentDidMount()` After rendering (DOM available) #

## Updating

`componentDidUpdate (prevProps, prevState, snapshot)` Use setState() here, but remember to compare props

`shouldComponentUpdate (newProps, newState)`Skips render() if returns false

`render()` Render

`componentDidUpdate (prevProps, prevState)` Operate on the DOM here

## Unmounting events

`componentWillUnmount()` Before DOM removal #

## Error events

`componentDidCatch()` Catch errors (16+) #

Set initial the state on constructor().

Add DOM event handlers, timers (etc) on componentDidMount(),

remove event listners in componentWillUnmount().

![](https://1265790178-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0HLhUbeW2DVd3onhHh%2F-M0HLilSkPXld4qvUaZ-%2F-M0HLy8Z2u-Tr8LRY92I%2FLifeCycle1.png?generation=1581929724071259\&alt=media)

![](https://1265790178-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0HLhUbeW2DVd3onhHh%2F-M0HLilSkPXld4qvUaZ-%2F-M0HLy8aC5Q9mf0qwJZJ%2FLifecycle2-min.png?generation=1581929723932860\&alt=media)

![](https://1265790178-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0HLhUbeW2DVd3onhHh%2F-M0HLilSkPXld4qvUaZ-%2F-M0HLy8cl1tv0rsizPrV%2FLifecycle3-min.png?generation=1581929722614005\&alt=media)

![](https://1265790178-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0HLhUbeW2DVd3onhHh%2F-M0HLilSkPXld4qvUaZ-%2F-M0HLy8ediMCL2D4jLLb%2FLifecycle4-min.png?generation=1581929723911360\&alt=media)

**My Bold Text, in red color.**{: style="color: red; opacity: 0.80;" }