Hello, Friend today I am going to explain about LifeCycle methods and Phases in React Js. If I define React Js in short “ReactJs is a powerful javascript library for building user interfaces as a single page application as well as mobile application, given by Facebook, Inc. ”.

User Interface is a platform where a user can do anything, interacts with many UI Components by performing many events like hovering, clicking, pressing a key etc. on UI Components.

Now come to the main point i.e. lifecycle method of React component. When a react component is rendered, it passes through different LifeCycle methods, where we can inject functionality according to our need and requirement. Each and every LifeCycle method has is own specific execution time and it is a good time to do a specific task where it performs better.

The lifecycle methods are various methods which are invoked at different phases of the lifecycle of a React component.

Four phases of a React component
The React component, likening else in the world, passes through the following phases are listed below:
1.Initialization
2.Mounting
3.Updation
4.Unmounting

Let’s start discussing above categorized in shortly then later we will go in briefly.

Initialization is a resistant phase where each component starts its journey by setting up the initial state and default props if any.

Mounting is the arise after setting up basic needs for the component in the Initialization phase, In this phase likening any React component is ready to mount in the browser DOM.

Updation is the phase which gives us a control over when updating should take place in any React component state.

Unmounting is the last phase where every React component gets dies after getting updated because components do not always stay in DOM.

Now I am going start discussing the first phase of the React component i.e. Initialization in brief.

1. Initialization

  •  constructor

It is initial and a resistant phase where each component starts its journey by setting up the initial state and default props. Below image is a visual representation of the Initialization Phase.

Initialization Phase of life Cycle
An initial state is set up in the constructor, where every component has its own data stores and later can change by setState().
A constructor is a special type of method which used to initialize the state of React Component and help to bind the methods for event handling.
When you implementing the constructor in the class which is the subclass of ” React.Component” you should always write the first line super(props) before any other statement otherwise, this.props (current class instance`s properties ) will be undefined, that’s small mistake create bugs. Below image represents the visual representation of the setup state.

 

If you don’t need to set initial state and binds method, you dont need to code constructor method. you should never call setState method inside constructor.

Here I created two component Information (parent class) and Company (child class) and call the child into the parent.

Run the Code

An output on screen with Company Name: XYZ  and Console output with constructor1, render1, render2 respectively Here XYZ data is stored in the state of “Information” component which is set up in a constructor.

If I change Company name or provide Company name name="ABC" manually outside to constructor.

Run The code

An output on screen with Company Name: ABC and Console output remain same constructor1, render1render2 respectively Here ABC data is pass-through props with the name name="ABC" from “Information” component to “Company” component.

Now I don’t provide any data to Company component. Now it takes it defaultProps value. The defaultProps is defined as a property of Component to define all the default value of props, which can be overridden with new prop values.

Run the Code

An output on screen with Company Name: Jellyfish Technologies and Console output remain same constructor1render1render2 respectively Here Jellyfish Technologies data is pass-through props with the name name="Jellyfish Technologies" from Company.defaultProps of “Company” component.

In this we should know that constructor and render are also a basic part of React Component, Sometimes it also treats as LifeCycle method, the constructor should be implemented If any we initialize otherwise it doesn’t need to write all time, we saw here broadly all above console output where constructor call first before render method.

Hope, this will make you get to little dive into lifecycle method and will realize how to set up the component in the Initialization phase and how related their life cycle method and working.

Look forward to all other phases and related their lifecycle methods in different parts go to React Component LifeCycle method Part-2, React Component LifeCycle method Part-3, React Component LifeCycle method Part-4.

Keep Learning and happy coding !! 🙂

If any extra information is required please comment below. If you have any query ask to feel free.