DEV Community

Shin-Young Jung
Shin-Young Jung

Posted on

[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 })
Enter fullscreen mode Exit fullscreen mode

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()

Top comments (1)

dance2die profile image
Sung M. Kim

You can also check out two graphs.