This tutorial covers the difference between super and super with props parameter in React class constructor.
For example, React component is defined with super(props) in constructor
class PropsExampleComponent extends React.Component {
constructor(props) {
super(props);
}
}
In this component, super with props is defined in constructor of a class
class ExampleComponent extends React.Component {
constructor(props) {
super();
}
}
Let’s explain the difference between those two components and their differences.
Super is a keyword in javascript and is used to call super or parent class in the hierarchy. React class extends React. Component with ES6 syntax
In ES6, Classes extend other classes using the extends
keyword. extends allows us to use parent data in child classes.
class Animal {
constructor(type) {
this.type = type;
}
}
class Lion extends Animal {
constructor(type) {
super(type);
}
eat() {
console.log('Lion eat'+this.type);
}
}
An important rule is to eat method only called after super type value is initialized, Then how type value
of the superclass is read?. using this
we can call this. eat method to execute eat function.
There is an ES6 limitation with this and super in using extend keyword
-
Child classes can not use this keyword until the super keyword is called.
-
if classes are extending other classes, the Constructor of the child class must use super as the first line in the constructor.
conclusion extends class always calls super keyword before calling this keyword.
The same rule applies to React components.
Super vs Super props in react constructor
Super
is used to access parent class methods and data
super(props)
will initialize the parent class props data and the child component is ready to use this. props
what happens if the component has no super defined in the constructor?
class ExampleComponent extends React.Component {
constructor(props) {
console.log(this); // an error
}
}
The above code throws the below error as this
will not be called before the super constructor
ReferenceError: Must call a super constructor in derived class before accessing ‘this’ or returning from derived constructor
class ExampleComponent extends React.Component {
constructor(props) {
super();
console.log(this); // ExampleComponent{props: undefined, context: undefined, refs: {…}, updater: {…}}
}
}
Next access this.props inside a constructor without calling super
class ExampleComponent extends React.Component {
constructor(props) {
super();
console.log(this.props); // undefined
}
}
This also works if we use props instead of this.props.
class ExampleComponent extends React.Component {
constructor(props) {
super();
console.log(props); // this works and gives an array
}
}
this.props gives undefined with super empty call.
So,Now this.props gives an expected values after calling super(props)
class ExampleComponent extends React.Component {
constructor(props) {
super(props);
console.log(this.props); // gives prints the properties array
}
}
Wrap up
super is the first statement in the constructor before accessing any method or data in the child component, with this, this.props returns undefined, To make it this.props, You have to call super(props) as a first-line in child class constructor.