[React] Component Render Call & Update Events Order

When it comes to do something before, during, after the rendering and updating react components, we need to know what functions are available for us and what is the order of being called.

Before rendering happens,
componentWillMount() function is called at first.

Then, render() funciton is called,

and lastly componentDidMount() is called.

You can update the state of React by using

setState({ state_name: new_value })

Note: Without calling setState() function, render update functions will not be called.

When the state is changed updating functions will be called in order below.

Order	Function
1st	componentWillReceiveProps()
2nd	shouldComponentUpdate()
3rd	componentWillUpdate()
4th	render()
5th	componentDidUpdate()

Comments

[Sung M. Kim]

You can also check out two graphs.

• Class Component life cycle graph: projects.wojtekmaj.pl/react-lifecy...
• For hooks - github.com/donavon/hook-flow