React Lifecycle Method

What is React Component Lifecycle?

In React, components go through a lifecycle of events:

• Mounting (adding nodes to the DOM)

• Updating (altering existing nodes in the DOM)

• Unmounting (removing nodes from the DOM)

• Error handling (verifying that your code works and is bug-free)

Here the DOM is the Document Object Model. The DOM is an object-oriented representation of the web page, which can be modified with a scripting language such as JavaScript. In React, we have ReactDOM. According to an answer on Stack Overflow ReactDOM acts like a glue between React and DOM and helps in accessing the DOM elements of the webpage but ReactDOM functionality can be utilised only in WebApps.

Suppose we write this code

class HelloWorld extends React.Component {
   render() {
    return <h1> Hello World </h1> 
   }
}

When this component is rendered and viewed, we get a HELLO WORLD. Before rendering, the component will have gone through its mounting, updating, and unmounting phase. Let’s break it down further.

Mounting a component means a new member comes up in the tree. Now, the component is inserted into the DOM.

After the mounting phase, the React component “grows” during the updating phase. Without updates, the component would remain as it was when it was initially created in the DOM. All the components in the projects we build always goes through the upadte phase as well. There is rarely a component which remains out.

Now, the final phase is called the unmounting phase. At this stage, the component “dies”. From the perspective of React, it is removed from  the DOM.

But, there is one more phase - the error handling phase. This occurs when your code doesn’t run or there’s a bug somewhere.

These all builds up the React Lifecycle.

What are React lifecycle methods?

Mounting Phase

The mounting phase refers to the phase during which a component is created and inserted to the DOM.

The following methods are called in order.

• constructor()

• static getDerivedStateFromProps()

• render()

• componentDidMount()

Updating lifecycle methods

Whenever a change is made to the state or props of a React component, the component is rerendered. In simple terms, the component is updated. This is the updating phase of the React component lifecycle.

• static getDerivedStateFromProps()

• shouldComponentUpdate()

• render()

• getSnapshotBeforeUpdate()

• componentDidUpdate()

Unmounting lifecycle method

Now after all the work is done, the React component is removed :( The following method is invoked during the component unmounting phase:

• componentWillUnmount()

Error handling lifecycle methods

When things go bad in your code, errors are thrown. The following methods are invoked when an error is thrown by a descendant component :

• static getDerivedStateFromError()

• componentDidCatch()

Conclusion

I hope thishelped you gain a better understanding of what React lifecycle methods are and how they work. In future, I'll be planning to add a detailed explanation on all the methods with an example as well. Till then Stay Tuned!

See you later 🖤