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 is defined with super(props) in constructor

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

In this component, super with props is defined in constructor of a class

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 hierarchy. React class extends React. Component with ES6 syntax

In ES6, Classes extend other classes using the extends keyword. extends allows us to use parent data in child classes.

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 is to eat method only called after super type value is initialized, Then how type value of the superclass is read?. using this we can call this. eat method to execute eat function.

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

• Child classes can not use 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.

  conclusion extends class always calls super keyword before calling 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.props gives undefined with super empty call.

So,Now this.props gives 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 component, with this, this.props returns undefined, To make it this.props, You have to call super(props) as a first-line in child class constructor.