Why call super or super(props)

December 13, 2017

In react world, many time we call super and super(props), I do that and saw in many places, however I’ve never asked myself what does it actually do…

eg.

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

    this.onClickDiv = this.onClickDiv.bind(this);
  }

  onClickDiv() {
    // do stuff
  }

  render() {
    return <div onClick={this.onClickDiv} />;
  }
}

So according to React source code

    function ReactComponent(props, context) {
      this.props = props;
      this.context = context;
    }

The only reason is to let you use this or this.props inside of the constructor, however you could always use props from the constructor attribute… There is only one reason when one needs to pass props to super():

Passing:

 class MyComponent extends React.Component {
     constructor(props) {
         super(props)

         console.log(this.props)
         // goood
     }
 }

Not passing:

 class MyComponent extends React.Component {
     constructor(props) {
         super()

         console.log(this.props)
         // -> undefined

         // Props parameter is still available
         console.log(props)
         // good
     }

     render() {
         // No difference outside constructor
         console.log(this.props)
         // good
     }
 }

Not calling:

 class MyComponent extends React.Component {
     constructor(props) {
           console.log(this)
         // undefined
     }
 }

Source: Stackoverflow