Why do some developers use constructor and super in their class in React.js?

Question

I always use this expression in my components:

class Cart extends Component { }

Recently I have seen a lot of codes using this expression.

class Cart extends React.Component {
  constructor(props) {
    super(props);
  }
}

Why is it? What is the purpose of using constructor and super? Is React.Component and Component same? Why do we pass props in constructor and super? I am not asking what super and constructor are, I am asking difference between 2 codes above and benefits of using each one?

I checked online but did not see any explanation, just code examples.

Answer 1

Constructors and super are not react specific or even javascript specific. They are specific to the inheritance in OOP.

Constructors

Constructors are what can be called as initializing functions in a class. Let's look at an example where a constructor can be used.

class parentClass {
 constructor(){
   this.foo = foo;
   this.bar = bar;
}

function sharedMethod1(){
    print(this.foo);
}

function sharedMethod(){
    print(this.bar)
}
}

object1 = new ParentClass(foo1, bar1);

object1.sharedMethod1() // this will print foo1;
object1.sharedMethod2() // this will print bar1;

object2 = new ParentClass(foo2, bar2);
object2.sharedMethod1() // this will print foo2;
object2.sharedMethod2() // this will print bar2;

when there is a need to create multiple instances of a class with different values for member variables / functions, we make use of the constructor functions.

Super

The super keyword is used in inheritance as well. In inheritance when extending a child class from a parent class, there is a need to initialise the constructor of the parent class. The super keyword is used for this purpose. let's look at the below example for super.

class ParentClass (){
constructor(){
this.foo = foo;
}
} 

class childClass extends ParentClass(){
super(foo1); // super is used here initialize the constructor of the ParentClass
} 

The same principle mentioned above is followed in React as well. Please look into dan abramov's blog post on constructor and super here https://overreacted.io/why-do-we-write-super-props/