Excerpt of article

super(props) is required to be called in constructor to access this.props. If it is not called in constructor, then this.props will be undefined in constructor.

Introduction

If you have been using react for a while, then you must be calling super(props) in constructor. Why do we have to do so?

Understanding super

super() is basically calling the parent function. If you create a es6 class or a function, and extend another class from it, then the child class can access the methods of parent class using super.

For example, here we have declared a class named Car which has hardcoded property noofWheels as 4 and it takes name from the parameter.

class Car {
  constructor(name){
    this.noOfWheels = 4
    this.manufacturer = name;
    this.autoAssist = false;
  }
  setAutoAssist(bool){
    this.autoAssist = bool;
  }
}

If a child class extends this Car class, then it inherits these properties.

class Tesla extends Car {
  constructor(owner){
   super("Tesla");
   this.owner = owner
  }
}


const myTeslaCar = new Tesla("Sam");
console.log(myTeslaCar);
> { noOfWheels: 4, manufacturer: "Tesla", owner: "Sam", autoAssist: "false"}

We can also use super to call the parent function or property specifically.

class Tesla extends Car {
  constructor(owner){
   super("Tesla");
   this.owner = owner
   super.setAutoAssist("true")
  }
}

const myTeslaCar = new Tesla("Sam");
console.log(myTeslaCar);
> { noOfWheels: 4, manufacturer: "Tesla", owner: "Sam", autoAssist: "true"}

Super in react

The same concept that we saw above applies, when you are creating a react component. You are extending Component of react.

This is code of Component function in ReactBaseClasses.js in react github repository.

/**
 * Base class helpers for the updating state of a component.
 */
function Component(props, context, updater) {
  this.props = props;
  this.context = context;
  // If a component has string refs, we will assign a different object later.
  this.refs = emptyObject;
  // We initialize the default updater but the real one gets injected by the
  // renderer.
  this.updater = updater || ReactNoopUpdateQueue;
}

When you extend Component, you are inheriting this.props, this.context and many other prototype functions like setState.

So if you do not call super(props) in constructor, then this.props will be undefined inside the constructor function. The constructor for a React component is called before it is mounted. 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.

Wrong way to access this.props in constructor

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

Correct way to access props in constructor

class TodoApp extends React.Component {
   constructor(props){
       super(props);
       console.log(this.props); // this will be defined
  }
  ...
}

So super(props) is required to be called in contructor in react if you are going to access props in constructor function.