How ReactJS components are called in the background

reactjs component

Today I am going to share with guys the important part regarding the component’s lifecycle in the background section.

Well, after creating the components and sent them to the browser to perform the tasks. Alright, you need to know little about the background scenario behind the components i.e how they are called and processes to get executed.

Particularly in the background section so many events take place for the components. Here the developer of the components needs to have the idea about those events and when and how to use them.

Basically, there are 7 components events which take places in the background whenever there is a request for the components has been made.

List of 7 components events:

  • componentWillMount
  • componentDidMount
  • componentWillReceiveProps
  • shouldComponentUpdate
  • componentWillUpdate
  • componentDidUpdate
  • componentWillUnmount

The componentWillMount event is executed before rendering on both the sides of the server and client side.
The componentDidMount will be executed only after the first render only on the client side.
The componentWillReceiveProps are invoked as soon as the props are updated before another render is called upon.
The shouldComponentUpdate will help to determine the true or false which shows whether the particular component s updated or not.
The componentWillUpdate is just called before the rendering.
The componentDidUpdate is called after the rendering.
The componentWillUnmount is called after the first component unmounted from the dom.

Now let’s go through an example where all the above component events are handled and called so as to increment the number value.

Through this example, you can be understanding the lifecycle of all the components very clearly.

The code as follows:

Import React from ’react’;

Class App extends React.component
    constructor(props)  {

this.state=  {

this.setNewNumber = this.setNewNumber.bind(this)
setNewNumber() {
this.setState({data + 1})


render() {
return (
<button onClick = { this.setNewNumber}>INCREMENT</button>
<content myNumber = {}></content>

Class Content extends React.Component {
componentWillMount() {
console.log(‘component will mount’)
componentDidMount() {
console.log(‘component did mount’)
componentWillReceiveProps(new props) {
console.log(‘component will receive props’)
shouldComponentUpdate(newprops, newstate) {
Return true;
componentWillUpdate(nextprops, nextstate) {
console.log(‘component will update)
componentDidUpdate(PrevProps, Prevstate) {
console.log(‘component did update’)
componentWillUnmount() {
console.log(‘component will unmount’)

render() {

return (

In the above code you see the 7 components events displayed. They will be executed as per the demand and functionality put over there.

Here I had created the state, data elements and whenever you clicking the button you will be taken to the setNewNumber shown above.

In the render method section you can see the content element where all the components methods are defined.Whenever an appropriate action takes place these methods get executed.

You need to send the prop.myNumber and which will be executed based on the above mentioned. The execution goes in a sequential order from componentWillMount event to last component Unmount.

So whenever events or changing states takes place the above are different events takes place in the components life cycle.

Leave a Reply

Your email address will not be published. Required fields are marked *