Lifecycle Methods in ReactJS

reactjs-component-lifecycle-methods

Lifecycle methods in ReactJS are different approaches that are used in different phases of the lifecycle of a component. With a good knowledge of the life cycle of the component, you would be able to create quality ReactJs user interfaces.

Around us, everything proceeds through a cycle of taking birth, growth, and death at some point. Consider plants, any software application, yourself, a div container or UI element in a web browser, each of which is born, develops by getting updates and dies.

Each component has several “lifecycle methods” that you can override to run code at particular time in process.

This is what the lifecycle techniques in ReactJs provide us to ensure that the developer creates a quality application and can plan what to do and how to do at various points of born, growth or death.

Talking about the component’s lifecycle, the lifecycle is divided into four phases:

  • Mounting
  • Updating
  • Error Handling
  • Unmounting

Mounting:

Mounting is the process of creating an element and inserting it in a DOM tree. This phase has two functions or methods that can hook up with componentWillMount() and componentDidMount().

mounting-phase

Visual representation of the phases: Mounting

mounting-visualization-phase
Here you can see, Header, Content, Footer are components that will store in Virtual DOM Memory before the Mounting phase. When Mounting will invoke, all the elements and content will render to the user interface in the browser.

Updating:

Updating is the process of changing state or props of component and update changes to nodes already in the DOM.

updating-phase

During this phase, a React component is already inserted into the DOM. Thus these methods are not called for the first render().

The componentWillUpdate() method is called immediately before rendering, when new props or state are being received. 

The componentDidUpdate() method is called immediately after React updates the DOM.

Visual representation of the phases: Updating

updating-phase-visual
Here you can see, React found some update in content then it will first change in Virtual DOM then Reflect the change in Browser User Interface.

Error Handling:

These are used when there is an error during rendering, in the lifecycle method or in the constructor of any child component.

Unmounting:

unmounting is the process of removing components from the DOM. It is called immediately before the component is unmounted from the DOM

Complete Example Code:

In the above code, I create an example of a count value increment on the click button. when you will run the code, you will get the first below-console message:

Constructor
Component Will Mount
Rendering
Component Did Mount

When you will click on Increment Button then the above Console message will not come again. it will come once when the page will load the first time. But the below Console Message will come every time when you will click the on-increment button.

component will update
Rendering
component did update

If you want to unmount any component then you need to write the unmountComponentAtNode Method.

componentDidMount() is the main place to write the Ajax code to fetch data from and render the data to component.

Conclusion:

React provides us the opportunity to specify techniques when creating components that will be called automatically at certain moments throughout the lifecycle of the component. 

I hope this article is helpful to you. If so, kindly suggest this!!!

Passing Arguments to Event Handlers

Handling Events – React

State in React Component

Related posts