Constructor is a special type of method which is used to initialize the object state in class. When we deal with the state in class components, we use constructor. It is a member of class. We know that we can create variables, functions inside our class. Similarly, we can also create constructor in our class. So all of these are member of our class. Constructor gets called automatically when an object is created. In React, when we call our component, we can say that an object is created. So when an object is created, our constructor runs.

If you are not dealing wth state and bind methods in class-based components, we can ignore constructor in React.

A constructor is often called a function or method. Let's understand it with plain JavaScript.

// This is our Class
class Student
{

// This is our Constructor
  constructor()
  {
    console.log("I am Constructor")
  }
}

// This is Object of our Class
let a = new Student()


// Output : I am Constructor

Here, we are creating a class Student. Inside our class, we are creating constructor().

Inside our special method i.e.constructor(), we are writing I am Constructor using console.log.

So far we have created a class, now it's time to create an object from that class. In the next line, we are creating a new object using the keyword new and storing it in a variable a.

If you open a console window, you'll see the output "I am Constructor".

We just create an object and it automatically gets called.

Notice that in the above example, we have created an object only a single time which is let a = new Student()

So suppose If you create objects 2 times, Constructor'll get called 2 times too. Let's see it :

class Student
{

  constructor()
  {
    console.log("I am Constructor")
  }
}

let a = new Student()
let b = new Student()

//  I am Constructor
//  I am Constructor

If you try to log console.log(a) or console.log(b), it'll show you Student as a Object

Constructor with Parameters :

So far we have seen the basic example of Constructor. Now let's see an example with parameters.

class Student
{

  constructor(name,age)
  {
    this.name = name;
    this.age = age;

  }
}

let a = new Student("Ravi",25)

// passed two arguments in our constructor

console.log(a.name)
console.log(a.age)

// Ravi
// 25

Here our arguments Ravi and 25 gets stored in our parameters name and age

In the above example, we have only one object so this refers to Current Object a.

super() in constructor :

super() is mostly used when we deal with state in class component. It is used to call our Parent component constructor. To understand super(), let's create a component Student.js :

Below is our Student.js component :

import React from 'react'

export default class Student extends React.Component {

constructor()
{

  super();
  console.log("I am Constructor");
}

  render() {
    return (
      <div>
      <h1>I am Student Component</h1>
      </div>

    )
  }
}

I hope you must have a basic understanding of Class Component. If you don't, then no worry. I have also written an article on it. You can visit here : Class Component in React

So in our Student.js, we have a Class Component and we are returning single h1 tag. Now, let's move to our second file which is index.js :

Below is our index.js file :

import React from 'react';
import ReactDOM from 'react-dom/client';
import "./index.css"
import Student from './Student';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(

  <>
  <Student />
  </>

);

We are calling our student component in index.js file that's it. Nothing rocket science here.

As soon as you call this component in index.js file, we'll get an output I am Student Component which we wrote in Student.js.

In Student.js, we wrote a line if you remember which is export default class Student extends React.Component.

export default class Student extends React.Component

• React.Component means in react module, we have a class Component and we are using its functionalities in our Student.js component.

Here, we can assume that Student is our Child Class and React.Component is Parent Class. In a nutshell, all the data which is inside Parent Class, we can use it in our Student component. This is also called Inheritance.

Whenever we call our component, it means an object is created and when an object is created, a constructor is called automatically. In our case, we called our component Student in index.js. If you call your component multiple times, an object gets created multiple times.