Use of super() in React

What is super()?

super() is a keyword in JavaScript that is used to call the constructor of its base or parent class. So that we can access the variables and properties of its parent class.

As we know that our React classes extend or inherit from our React.Component with ES6 syntax, which gives us access to the parent class variables, methods ...

Syntax

We always need to call our super() in the constructor of our class because the constructor is the first thing that is called when our component is being created or inserted into the DOM

class Counter extends React.Component {
  constructor(props) {
    super(props); 
    this.state = { count: 0 };
  }
  // ...
}

Use of super(props)

Now let’s talk about super with practical implementation.

Without super(props)

In this example, we will not be using super(props)

import React from "react";

class Counter extends React.Component {
    constructor(props) {
        console.log(this.props);
    }
    render() {
        console.log(this.props);
        return null;
    }
}

export default Counter;

Output: When we run the above code, it will log an error on the console.

Explanation: This is because our child class constructor, i.e. Counter class here, does not recognize this keyword in the constructor. We cannot use this keyword before calling the constructor of the parent class, which we can call by calling super(). But the code outside the constructor would not be affected.

With super(props)

In this example, we will be using super(props) before using this keyword

import React from "react";

class Counter extends React.Component {
    constructor(props) {
        super(props);
        console.log(this.props);
    }
    render() {
        console.log(this.props);
        return null;
    }
}

export default Counter;

Output: When we run the above code, it will log an object on the console.

Explanation: Now props are getting logged into the console.

So, to conclude, super() calls the constructor of the parent class, i.e. React.Component in the above example. So when we pass the props to the super, they are assigned to this as well.

So this leaves us with another question: why pass props in super?

Difference between super() & super(props)

Even if we don’t pass props in super() we are still able to access this.props in the render and other methods because React assigns props on the instance right after calling our constructor.

super()

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

Did you notice that this.props are still undefined between the super call and the end of the constructor because React later assigns this.props after your constructor has run.

super(props)

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

This ensures this.props is set even before the constructor exits. And that's why it is recommended always to pass down super(props), even though it isn’t strictly necessary.

Wrapping up

Whoo! That was too much for today. Let's give some time to our little brains.
Thank you for reading and learning something valuable. If you find this article helpful, please leave a like and share it, also if you have any questions, don’t hesitate to ask in the comments.

Like • Share • Comment

💻 Happy Coding

Moazam AliFollow

Frontend Developer who is always passionate in discovering new stuff and building networks.