Why Do We Write super(props) in React JS?
Why do we call super? Can we not call it? If we have to call it, what happens if we don't pass props?
Let's find out.
In JavaScript, super refers to the parent class constructor. (In our example, it points to the React.Component implementation . )
Importantly, you can't use this in a constructor until after you've called the parent constructor. JavaScript won't let you:
class Toggle extends React.Component {
constructor(props) {
// 🔴 Can't use `this` yet
super(props);
// ✅ Now it's okay though
this.state = { isOn: true };
}
// …
}
There's a good reason for why JavaScript enforces that parent constructor runs before you touch this. Consider a class hierarchy:
class Animal {
constructor(name) {
this.name = name;
}
}
class Dog extends Animal {
constructor(name) {
this.bark(); // 🔴 This is disallowed, read below why
super(name);
}
bark() {
alert('woof wuff');
}
}
Imagine using this before super call was allowed. A month later, we might change bark to include the Animal's name in the message:
bark() {
alert('woof wuff');
alert('My heckin name is ' + this.name + ', woof to meet you!');
}
But we forgot that this.bark() is called before the super() call had a chance to set up this.name. So this.name isn't even defined yet! As you can see, code like this can be very difficult to think about.
To avoid such pitfalls, JavaScript enforces that if you want to use this in a constructor, you have to call super first. Let the parent do its thing! And this limitation applies to React components defined as classes too:
constructor(props) {
super(props);
// ✅ Okay to use `this` now
this.state = { isOn: true };
}
This leaves us with another question: why pass props?
You might think that passing props down to super is necessary so that the base React.Component constructor can initialize this.props
// Inside React
class Component {
constructor(props) {
this.props = props;
// ...
}
}
So even if you forget to pass props to super(), React would still set them right afterwards. There is a reason for that.
When React added support for classes, it didn't just add support for ES6 classes alone. The goal was to support as wide range of class abstractions as possible. It was not clear how relatively successful would ClojureScript, CoffeeScript, ES6, Fable, Scala.js, TypeScript, or other solutions be for defining components. So React was intentionally unopinionated about whether calling super() is required — even though ES6 classes are.
So does this mean you can just write super() instead of super(props)?
Probably not because it's still confusing. Sure, React would later assign this.props after your constructor has run. But this.props would still be undefined between the super call and the end of your constructor:
// Inside React
class Component {
constructor(props) {
this.props = props;
// ...
}
}
// Inside your code
class Toggle extends React.Component {
constructor(props) {
super(); // 😬 We forgot to pass props
console.log(props); // ✅ {}
console.log(this.props); // 😬 undefined }
// ...
}
It can be even more challenging to debug if this happens in some method that's called from the constructor. And that's why I recommend always passing down super(props), even though it isn't strictly necessary:
class Toggle extends React.Component {
constructor(props) {
super(props); // ✅ We passed props
console.log(props); // ✅ {}
console.log(this.props); // ✅ {}
}
// ...
}
This ensures this.props is set even before the constructor exits.
With Hooks, we don't even have super or this. But that's a topic for another day.
Mildaintrainings brings you a virtual, hands-on React JS training course. React may be a reading library to develop single page applications in Javascript. It is the foremost widespread library backed by Facebook. With react library, you will be able to develop dynamic side applications that come with nice options like element design, knowledge binding, declarative views, universal apps. Mildaintrainings course on reacting can cause you to at home with the beginner to intermediate ideas of React library to create SPA applications that may facilitate your business win quicker ROI, thanks to lesser development and maintenance value, and quick accessibility.Little knowledge of HTML, CSS, and Javascript would be good. Enroll & Get Certified now!
