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 = {
      val         


        

Answer 1

When implementing the constructor for a React.Component subclass, you should call super(props) before any other statement. Otherwise, this.props will be undefined in the constructor, which can lead to bugs.

Answer 2

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.

Answer 3

super(); is not required by react, but is mandated by ES6 subclass

Answer 4

To use this keyword we should use the super keyword before it. Why? super is used to call the parent class's constructor.

Now why do we need to call the parent's constructor? The answer is to initialize the properties values which we are referring through this keyword.

Answer 5

super() will calls the constructor of its parent class. This is required when you need to access some variables from the parent class.

In React, when you call super with props. React will make props available across the component through this.props. See example 2 below

without super()

class A {
  constructor() {
    this.a = 'hello'
  }
}

class B extends A {
  constructor(){
    console.log(this.a) //throws an error
  }
}

console.log(new B())

with super()

class A {
  constructor(props) {
    this.props = props
  }
}

class B extends A {
  constructor(props) {
    super(props)
    console.log(this.props)
  }
}

console.log(new B({title: 'hello world'}))

Hope this helps!

Answer 6

Worth adding that super() is short for superclass contructor, a concept from inheritance.

By default the class Square inherits the constructor from its superclass React.Component.

The inherited constructor can be overridden by declaring a new constructor() method.

If the intention is to extend rather than override the superclass constructor then it must be explicitly invoked using super().