DEV Community

ldsrogan
ldsrogan

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)

Collapse
 
dance2die profile image
Sung M. Kim

You can also check out two graphs.

Find and follow new tags! 🤔 Did you know?   DEV has a variety of tags to help you find the content you like. Find and follow your favorite tags