React component lifecycle methods

Flow of lifecycle methods

I checked it with react 16.2.0.

On a client

When component is rendered for the first time

When component is rerendered

After ajax is reduced via redux

So it means that new props received.

When state is updated

So it means that new props received.

When component is removed

On a server

How to use these methods

constructor

set initial state this.state = ...
bind methods if needed

componentWillMount

this.setState()
AJAX calls only for server-side rendering

componentDidMount

AJAX calls on client-side

componentWillReceiveProps(nextProps)

sync state to props with this.setState()

shouldComponentUpdate(nextProps, nextState, nextContext)

optimizations to reduce heavy component rendering times

componentWillUpdate(nextProps, nextState)

sync state to props with this.setState()

componentDidUpdate(prevProps, prevState, prevContext)

AJAX calls on client-side

componentDidCatch(errorString, errorInfo)

render messages on errors
1_sn-ftowp0_VVRbeUAFECMA
Good article on react.js component lifecycle methods with DOs and DONTs:
https://medium.com/@baphemot/understanding-reactjs-component-life-cycle-823a640b3e8d

LEAVE A COMMENT