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.
Top comments (0)