DEV Community

Cover image for Use of super() in React
Moazam Ali
Moazam Ali

Posted on

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 };
  }
  // ...
}
Enter fullscreen mode Exit fullscreen mode

 

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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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

Output 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
}
  // ...
}
Enter fullscreen mode Exit fullscreen mode

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);  // {}
}
  // ...
}
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)