Use of super() in React
Tags: react, javascript, programming, tutorial
Published: 2022-09-24 18:40:45

## 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

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

&nbsp;

## 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)

```react
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

```react
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.

![Output Console](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qvl0gbdvw58i4d1w094j.jpg)

**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?_

&nbsp;

## 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()

```react
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)

```react
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.

&nbsp;

## 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 

---

{% user moazamdev %}