What does calling super() in a React constructor do?

Question

Learning React from the docs and came across this example:

class Square extends React.Component {
  constructor() {
    super();
    this.state = {
      value: null,
    };
  }
  ...
}

According to Mozilla, super allows you to use this in the constructor. Is there any other reason to use a standalone super (I know super allows you to access parent class's methods as well) but with React is there any other use case of just calling super() by itself?

Answer 1

super() is called inside a react component only if it has a constructor. For example, the below code doesn't require super:

class App extends React.component {
    render(){
        return <div>Hello { this.props.world }</div>;
    }
}

However if we have a constructor then super() is mandatory:

class App extends React.component {
    constructor(){
        console.log(this) //Error: 'this' is not allowed before super()

    }
}

The reason why this cannot be allowed before super() is because this is uninitialized if super() is not called. However even if we are not using this we need a super() inside a constructor because ES6 class constructors MUST call super if they are subclasses. Thus, you have to call super() as long as you have a constructor. (But a subclass does not have to have a constructor.)

We call super(props) inside the constructor if we have to use this.props, for example:

class App extends React.component{
    constructor(props){
        super(props);
        console.log(this.props); // prints out whatever is inside props

    }
}

I hope I could make it clear.