Difference between super and super props in React constructor class?

This tutorial covers the difference between super and super with props parameter in React class constructor.

For example, React component defines with super(props) in the the constructor.

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

In this component, super with props defines n the class constructor .

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

Let’s explain the difference between those two components and their differences.

Super is a keyword in javascript and is used to call super or parent class in the inheritance hierarchy. React class extends React.Component with ES6 syntax

In ES6, Classes extend other classes using the extends keyword.

Extends does allow to use parent data in child classes.

Let’s see an java example

class Animal {
  constructor(type) {
    this.type = type;
  }
}

class Lion extends Animal {
  constructor(type) {
    super(type);
  }
  eat() {
    console.log('Lion eat'+this.type);
  }
}

An important rule , only call eat method after the super type value initialize.

Then how type value of the superclass read?. using this, we can get the content. Next, we can call this.eat method to execute eat function.

There is an ES6 limitation with this and super in using the extend keyword.

• Child classes can not use the this keyword until the super keyword is called.
• if classes are extending other classes, the Constructor of the child class must use super as the first line in the constructor.

The conclusion is, extends class always calls the super keyword in the constructor before calling the this keyword.

The same rule applies to React components.

Super vs Super props in react constructor

Super is used to access parent class methods and data. super(props) will initialize the parent class props data and the child component is ready to use this.props.

what happens if the component has no super defined in the constructor?

class ExampleComponent extends React.Component {
  constructor(props) {
          console.log(this); // an error

  }
}

The above code throws the below error as this will not be called before the super constructor

ReferenceError: Must call a super constructor in derived class before accessing ‘this’ or returning from derived constructor

class ExampleComponent extends React.Component {
  constructor(props) {
      super();
          console.log(this); // ExampleComponent{props: undefined, context: undefined, refs: {…}, updater: {…}}

  }
}

Next, access this.props inside a constructor without calling super

class ExampleComponent extends React.Component {
  constructor(props) {
      super();
          console.log(this.props); // undefined

  }
}

This also works if we use props instead of this.props.

class ExampleComponent extends React.Component {
  constructor(props) {
      super();
          console.log(props); // this works and gives an array

  }
}

this.propsgives undefined with the super empty call, whereas props give valid value.

Next, this.props give an expected values after calling super(props).

class ExampleComponent extends React.Component {
  constructor(props) {
      super(props);
          console.log(this.props); // gives prints the properties array

  }
}

Wrap up

super is the first statement in the constructor before accessing any method or data in the child or derived component, this.props returns undefined if you don’t call the super(prop) constructor,

To make it this.props available, You have to call super(props) as a first line in the child class constructor.