Beginners Guide to Super() And Super(Props) In React

Super() in JavaScript

The super keyword in JavaScript is mostly used to access properties on an object literal or class's [[Prototype]] or to invoke a superclass's constructor. The super keyword can be used in two ways:

• "function call" (super(...args)),
• "property lookup" (super.prop and super[expr]).

Suppose you have a class 'HeadPhone',

class HeadPhone{
}

In this class, we have a 'constructor()' method,

class HeadPhone{
 constructor(){
   console.log(“this is a HeadPhone”);
 }
}

The 'constructor' method is executed when we instantiate the class method. For example,

const headphone = new HeadPhone()

When we instantiate the class, it executes the constructor method. We can extend the class by creating a class with the 'extends' keyword.

class BrandA extends HeadPhone {
}

However, when you extend a class, it inherits all the methods and properties from the extended class. For example,

const brand = new BrandA();

Then, when it instantiates, it executes the class 'HeadPhone' and its constructor method. We can also override the parent class constructor method by defining a constructor method inside the derived class.

class BrandA extends HeadPhone { 
  constructor() { 		
    console.log("this is a brandA"); 
  } 
}

Once you override the constructor, it will execute it. Here, when you create a new object. It will print the 'this is a brandA'.

const brand = new BrandA();

Javascript uses 'super()' to call the parent constructor method in the child that inherits the parent. Let’s look into it with an example. Consider a class called ‘Headphone’, with type as a parameter. We initialize it by passing the type as a parameter.

class HeadPhone {
  constructor(type) {
    this.type = type;
  }
}

Now, we want to create different child classes by extending HeadPhone. Instead of defining type properties on each child class, we can extend the parent class type property and access it in child classes.

class BrandA extends HeadPhone {
  constructor(props) {
    super()
  }
getType(){
return this.type
}
}
const A = new BrandA("OverTheEar")
console.log(A.getType())

To access properties from the parent class, we must call super() as it calls the constructor method in the parent class and defines the properties in it. When we miss adding 'super()' inside the class, it will throw an error.

We know that super() is to access the properties from the parent class. Let’s see how to implement that in a React class component.

Super() in React component

Super() function is to call the constructor of the parent class. It is used when we need to access a few variables in the parent class. It returns an object which represents the parent class. The right way to use it is when the child class and parent class are from the same field. To put it simply, it refers to the immediate parent class instance variable, in the above example, which is also the base class for the Person component. So when we pass props to super, the props get assigned to this.

index.js

import React from "react";
import { render } from "react-dom";
import Children from "./Children";
class Main extends React.Component {
constructor(props) {
super();
}
render() {
return <Children />;
}
}
render(<Main />, document.getElementById("root"));

Children.js

import React from "react";
import { render } from "react-dom";

export default class Children extends React.Component {
constructor(props) {
super();
this.state = { name: "Test" };
}
render() {
return <h2>{this.state.name}</h2>;
}
}

Here, we have Main and Children components with state and props. As you can see, it extends 'React.Component' with the 'super()' method. A component that extends 'React.Component' must call the 'super()' constructor in the derived class since it’s required to access this context inside the derived class constructor.

React comes in handy by throwing an error that the component must call 'super()' inside the constructor when we miss doing that.

That brings us to another question: Why do we need props? And what’s different between super and super(props)? Before we get into the topic of difference, let’s look into what props are in react.

Props in React component

There are two ways to handle data objects in React. They are state and props. The state is used to manage the data within the component. Props refer to Properties. It’s read-only data that React will use to pass from one component to another. Props are used to pass data between different components.

Let’s take the above example to understand how React uses props to pass data between components.

index.js

import React from "react";
import { render } from "react-dom";
import Children from "./Children";
class Main extends React.Component {
constructor(props) {
super();
}
render() {
return <Children name={"Turing"} />;
}
}
render(<Main />, document.getElementById("root"));

Children.js

import React from "react";
import { render } from "react-dom";

export default class Children extends React.Component {
constructor(props) {
super();
}
render() {
return <h2>{this.props.name}</h2>;
}
}

Here, we pass name data to the Children component.

<Children name={"Turing"} />;

To access that parameter inside that component, we can use props as React handles that parameter data in props. You can see that we can render the name property using [this.props.name] in the Children component.

Props are immutable, i.e., once you set the value to props, we can’t change it. We can use props in both functional and class-based components.

Now, we know what props are in React. But why do we need to pass it inside super(props)? What difference does it make if we don’t pass props inside super()? Let’s see them in detail by analyzing the above component.

Super() vs Super(props)

import React from "react";
import { render } from "react-dom";

export default class Children extends React.Component {
  constructor(props) {
    super();
  }

  render() {
    return <h2>{this.props.name}</h2>;
  }
}

Here, we have a component with a props name coming from the parent component. As a result, it renders the props name in the render method and displays it on the page.

What will happen if we want to access that prop inside the constructor method? Will we be able to access it inside the constructor? Let’s find out.

You can see that it’s undefined. When we miss passing props inside 'super(),' it won’t assign props to this context and will be 'undefined' inside the constructor. You might wonder if it doesn’t assign it to this context; how is it rendering inside the render method?

Here’s the catch, React assigns props on the instance right after calling the component constructor.

//React under the hood
const instance = new DefinedComponent(props);
instance.props = props;

So, even if we don’t pass props to super(). React will still assign them right afterward. That’s why it works inside the render method and not in the constructor.

Code source

When you pass props to the 'super()' method in the constructor, the main difference will be accessing 'this.props' inside the constructor method.

As you can see, you can access 'this.props' inside the constructor method when you pass 'props' to 'super()' method in the constructor.

Let’s say we miss passing props to it, it will be challenging to debug if we initialize a method in the constructor and that specific method tries to access 'this' inside the function. We might not even notice it, and it can be challenging or difficult.

Conclusion

We have discussed the difference between super() and super(props) in React. We learned how to extend a class and access the parent constructor method. Apart from that, the article briefed on the super () in Javascript, Props in react components, and more to get you started without any setbacks. Go ahead and read the frequently asked questions to clear any lingering queries from your mind.