Difference between super and superprops in React constructor class?

In this tutorials, covers an 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 about difference between those two components and its differences.

Super is a keyword in javascript which is used to call super or parent class in hirearcy React class extends React.Component with ES6 syntax

In ES6, Classes extend other classes using 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);
  }
}

Important rule is eat method only called after super type value is inititalzed, Then how type value of super class is read?. using this we can call this.eat method to execute eat function.

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

• Child classes can not use this keyword until super keyword is called.

• if classes are extending other classes, Constructor of child class must use super as first line in constructor.

  conclusion, extends class always calls super keyword before calling this keyword.

  The same rule applies for 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 child component is ready to use this.props

what happens if component has no super defined in constructor?

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

  }
}

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

ReferenceError: Must call 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 first statement in constructor before access any method or data in 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.