Why we use constructor() and super() in class?

Ans 

constructor() 

• The constructor is a method that’s automatically called during the creation of an object from a class.
• It can be used to bind event handlers to the component.
• It can be used for initializing the local state of the component.
• The constructor() method is fired before the component is mounted.
• When you call the super() method, it calls the constructor of the parent class which in the case of a React component is React.Component

super()

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

    }

}