Classic React Lifecycle Hooks
Home >> Computers & Technology >> Software >> Classic React Lifecycle Hooks

Classic React Lifecycle Hooks

Published by: Subhash (1)
Word Count: 1046 | Comments: 0 | Article Views: 68 | Share this article on

All React components have a really complicated life cycle, nature itself of React makes this be this way. To make life easier, React provides us with a series

of events to capture and act in certain points of this life cycle. They really are only 7 capture points, which we can divide by points of construction, update and

destruction. Then you can discover what they are and to use them you will only have to include them within the definition of your component.

componentWillMount() {}

This method will be executed only once, whether you are using ReactJS in the Client or in the Server, and it will do it once the rendering process has finished. Keep in mind that if you use setState inside this method, the render () process will execute only once despite having triggered a change of state

componentDidMount() {}

Like componentWillMount, it is executed only once, but this time only in Client applications. At this point in the life cycle your component, this already has a representation in the DOM to which You have access through the ReactDOM.findDOMNode (this) function. Something very important that you have What to keep in mind is that if you have to:

  • Integrate with a JavaScript Framework.
  • Set a timer with setTimeout or setInterval.
  • Make an AJAX request for data preload.

This is the method where you will have to include this type of operations

componentWillReceiveProps(next_props) {}

It is an update capture point and as its name indicates this method will be executed when our component receives new properties. Being an update capture point, it is not

will execute with the first rendering. The componentWillReceiveProps method receives as a parameter the future properties that it will contain our component and therefore we can make a comparison with the properties using this.props:

componentWillReceiveProps(next_props) {


changed:!== true: false



In this example we are comparing if the id attribute of our properties changes with the new one assignment, containing the boolean in a state attribute called changed. The use of setState () within this method never triggers an additional rendering since React groups all the changes are of properties or status within this method. Use this capture point as an opportunity to generate a transition before our component re-execute render (). Here is an example using an attribute change of State:

componentWillReceiveProps(next_props) {


loading: true

render() {

className = this.state.loading? ’loading’: ’loaded’;



There is no such method that componentWillReceiveState for when a state attribute has been modified. A change of ownership can result in a change of status, but it will never happen otherwise. If you need to perform operations in response to a state change you will have to use the capture point componentWillUpdate.

componentWillUpdate(next_props, next_state) {}

This update capture point will be executed immediately before rendering the new ones properties or state attributes. And just like componentWillReceiveProps will never run

with the first rendering. In this function we will receive two parameters:

  • The new properties
  • The new state

Like componentWillReceiveProps this is a good place to define a transition before that our component is updated. What you have to keep in mind is that you can not use setState () within this method, since you would generate a cyclic reference. If you need update a status attribute in response to a property change you must use forcefully componentWillReceiveProps.


shouldComponentUpdate(next_props, next_state) {

return true;


This update capture point, like the previous one, is executed before rendering the new properties or status, and it will never run with the initial rendering.

Unlike other update capture points you can use this method to block the rendering by returning a Boolean with false. This is really useful when you’re sure that the changes in the new properties or in the state do not need to be rendered. In short, if shouldComponentUpdate returns false, then render () will be completely omitted until there is a new change of properties or state and therefore componentWillUpdate and componentDidUpdate will not be executed.

By default this method will always return true to prevent subtle errors when the state has been modified inside him. But if within this method you treat the status attributes as immutable you can overwrite the return with what you really need.

We all know that performance is very important in web applications and can sometimes be become a real bottleneck. Imagine that we have hundreds of components inside of our application, the responsible use of shouldComponentUpdate can accelerate in a your application is considerable

componentDidUpdate(prev_props, prev_state) {}

This update capture point is executed immediately after the component has been rendered. Like all update capture points will never run with the first rendering. In this case we receive two parameters:

  • prev_props: The previous properties
  • prev_state: The previous state

This is a good place to operate with the DOM of our component, because at this point we have all the changes represented with the new rendering.

componentWillUnmount() {}

It is the only point of capture of destruction that we have within the life cycle of our component, and it will be executed immediately before the component is removed from the DOM. It can be used to perform some type of cleaning, such as removing timers as well as Remove DOM elements that were created within componentDidMount.

Subhash - About the Author:

Subhash is CEO of Yexaa and technical writer. He writes informative and unbiased articles to provide essential knowledge to the readers. Yexaa provides Job Support for USA, UK, Canada developers and professional to resolve their technical challenges.

* Required fields
Type the characters you see in the picture below.*