React.js Component Lifecycle

Understanding the component lifecycle

lets you perform actions
when a component is created, updated or destroyed.

 

It also allows you to decide
if a component should be updated at all
and react to props or state changes.

read more

React.js Component Lifecycle

Lifecycle Phases

React.js Component Lifecycle

Lifecycle Methods

Various methods are executed at specific points in a component's lifecycle.

Initializing

class fields

React.js Component Lifecycle

componentDidMount ( )

mounting

React.js Component Lifecycle

render ( )

* commonly used

* commonly used

constructor ( props )

* commonly used

* rarely used

componentWillMount ( )

* will deprecate

React.js Component Lifecycle

componentWillReceiveProps( )

componentWillUpdate( )

render ( )

updating

shouldComponentUpdate( nextProps , nextState )

componentDidUpdate( prevProps, prevState)

* will deprecate

* will deprecate

getSnapshotBeforeUpdate(prevProps, prevState)

static    getDerivedStateFromProps( nextProps , currentState )

* rarely used

* rarely used

* commonly used

* commonly used

Commit phase

componentWillUnmount ( )

unmounting

React.js Component Lifecycle

componentDidCatch ( )

Error Handling

read more

React.js Component Lifecycle