super vs super(props) in React⚛️

Akash Gupta

3 min read

·

May 24, 2020

--

Listen

Share

Press enter or click to view image in full size

While creating a class component in React we often pass props as an argument to the super method in the constructor of the component. In this article we will dig deep into why do we need to pass props to super method and what if we don’t?

But before we proceed let’s understand an example:

Consider a class named “Model” which will inherit the methods from the “Car” class, by using the extends keyword.

By calling the super() method in the constructor method, we call the parent's constructor method and gets access to the parent's properties and methods:

class Car{
  constructor(name) {
    this.name = name;
  }
}class Model extends Car{
  constructor(name) {
  super(name);
  this.message(); 
    
  }
  message() {
    console.log(`I bought a ${this.name}`) //prints I bought a Tesla
  }
}
const myVehicle=new Model('Tesla')

By passing super(name) we are initializing the base class constructor and hence we are able to access the value of this.name in our child class but instead of super(name) if we just write super() then the value of this.name will undefined definitely.

The same scenario happens in React, Therefore it is necessary to pass props to super, so the base React.Component constructor can initialize this.props

//inside React
class Component {
  constructor(props) {
    this.props = props;
    ....
    //other statements
    ....
   }
}

Basically the only reason you need to pass props to super() if you want to access this.props inside the constructor of the class.

• case 1: When props is passed

class Example extends React.Component {    
    constructor(props) {
        super(props);
        console.log(this.props); // Gives you the props object {}
    }
}

• case 2: When props is not passed

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

Note: Even though we don’t pass props to super we still can access this.props in remaining methods of the class.

class Example extends React.Component {    
    constructor(props) {
        super();
        console.log(this.props); // undefined
    }
    method(){
        console.log('this.props') // props object {}
    }
}

This would definitely raise questions in your mind.

It turns out that under the hood React assigns props on the instance of the class right after calling constructor:

// Inside React
  const instance = new Example(props);
  instance.props = props;

So even if you don’t pass props to super(), React would settle it right afterwards.

Summary

• Pass props when you want to access this.props in constructor.
• React assigns props on the instance of the class right after calling the constructor.
• The super keyword is used to access and call functions on an object’s parent.
• Useful Links:

Thanks for reading! If you enjoyed this article, please click the 👏 button and share to help others find it! Feel free to leave a comment 💬 below.
Have feedback? Let’s connect on Twitter.