What does calling super() in a React constructor do?
JavascriptReactjsConstructorEcmascript 6Javascript Problem Overview
Learning React from the docs and came across this example:
class Square extends React.Component {
constructor() {
super();
this.state = {
value: null,
};
}
...
}
According to Mozilla, super allows you to use this
in the constructor. Is there any other reason to use a standalone super
(I know super
allows you to access parent class's methods as well) but with React is there any other use case of just calling super()
by itself?
Javascript Solutions
Solution 1 - Javascript
super()
will call the constructor
of its parent
class. This is required when you need to access some variables from the parent class.
In React, when you call super
with props, React will make props
available across the component through this.props
. See example 2 below
without super()
class A {
constructor() {
this.a = 'hello'
}
}
class B extends A {
constructor(){
console.log(this.a) //throws an error
}
}
console.log(new B())
with super()
class A {
constructor(props) {
this.props = props
}
}
class B extends A {
constructor(props) {
super(props)
console.log(this.props)
}
}
console.log(new B({title: 'hello world'}))
Hope this helps!
Solution 2 - Javascript
super()
is called inside a react component only if it has a constructor. For example, the below code doesn't require super:
class App extends React.component {
render(){
return <div>Hello { this.props.world }</div>;
}
}
However if we have a constructor then super()
is mandatory:
class App extends React.component {
constructor(){
console.log(this) //Error: 'this' is not allowed before super()
}
}
The reason why this
cannot be allowed before super()
is because this
is uninitialized if super()
is not called. However even if we are not using this
we need a super()
inside a constructor because ES6 class constructors MUST call super if they are subclasses
. Thus, you have to call super()
as long as you have a constructor. (But a subclass does not have to have a constructor.)
We call super(props)
inside the constructor if we have to use this.props
, for example:
class App extends React.component{
constructor(props){
super(props);
console.log(this.props); // prints out whatever is inside props
}
}
I hope I could make it clear.
Solution 3 - Javascript
Worth adding that super()
is short for superclass contructor, a concept from inheritance.
By default the class Square
inherits the constructor from its superclass React.Component
.
The inherited constructor can be overridden by declaring a new constructor()
method.
If the intention is to extend rather than override the superclass constructor then it must be explicitly invoked using super()
.
Solution 4 - Javascript
When implementing the constructor for a React.Component subclass
, you should call super(props)
before any other statement. Otherwise, this.props
will be undefined
in the constructor, which can lead to bugs.
Solution 5 - Javascript
In JavaScript, super refers to the parent class constructor.
Importantly, you can’t use this in a constructor until after you’ve called the parent constructor. JavaScript won’t let you: But we forgot that if a function 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:
Solution 6 - Javascript
super(); is not required by react, but is mandated by ES6 subclass
Solution 7 - Javascript
To use this
keyword we should use the super
keyword before it. Why? super
is used to call the parent class's constructor
.
Now why do we need to call the parent's constructor
? The answer is to initialize the properties values which we are referring through this
keyword.