When is it important to pass props
to super()
, and why?
class MyComponent extends React.Component {
constructor(props) {
supe
When you pass props
to super
, the props get assigned to this
. Take a look at the following scenario:
constructor(props) {
super();
console.log(this.props) //undefined
}
How ever when you do :
constructor(props) {
super(props);
console.log(this.props) //props will get logged.
}
In this example, you are extending the React.Component
class, and per the ES2015 spec, a child class constructor cannot make use of this
until super()
has been called; also, ES2015 class constructors have to call super()
if they are subclasses.
class MyComponent extends React.Component {
constructor() {
console.log(this); // Reference Error
}
render() {
return <div>Hello {this.props.name}</div>;
}
}
By contrast:
class MyComponent extends React.Component {
constructor() {
super();
console.log(this); // this logged to console
}
render() {
return <div>Hello {this.props.name}</div>;
}
}
More detail as per this excellent stack overflow answer
You may see examples of components created by extending the React.Component
class that do not call super()
but you'll notice these don't have a constructor
, hence why it is not necessary.
class MyOtherComponent extends React.Component {
render() {
return <div>Hi {this.props.name}</div>;
}
}
One point of confusion I've seen from some developers I've spoken to is that the components that have no constructor
and therefore do not call super()
anywhere, still have this.props
available in the render()
method. Remember that this rule and this need to create a this
binding for the constructor
only applies to the constructor
.
There is only one reason when one needs to pass props
to super()
:
When you want to access this.props
in constructor.
Passing:
class MyComponent extends React.Component {
constructor(props) {
super(props)
console.log(this.props)
// -> { icon: 'home', … }
}
}
Not passing:
class MyComponent extends React.Component {
constructor(props) {
super()
console.log(this.props)
// -> undefined
// Props parameter is still available
console.log(props)
// -> { icon: 'home', … }
}
render() {
// No difference outside constructor
console.log(this.props)
// -> { icon: 'home', … }
}
}
Note that passing or not passing props
to super
has no effect on later uses of this.props
outside constructor
. That is render
, shouldComponentUpdate
, or event handlers always have access to it.
This is explicitly said in one Sophie Alpert's answer to a similar question.
The documentation—State and Lifecycle, Adding Local State to a Class, point 2—recommends:
Class components should always call the base constructor with
props
.
However, no reason is provided. We can speculate it is either because of subclassing or for future compatibility.
(Thanks @MattBrowne for the link)
When implementing the constructor()
function inside a React component, super()
is a requirement. Keep in mind that your MyComponent
component is extending or borrowing functionality from the React.Component
base class.
This base class has a constructor()
function of its own that has some code inside of it, to setup our React component for us.
When we define a constructor()
function inside our MyComponent
class, we are essentially, overriding or replacing the constructor()
function that is inside the React.Component
class, but we still need to ensure that all the setup code inside of this constructor()
function still gets called.
So to ensure that the React.Component
’s constructor()
function gets called, we call super(props)
. super(props)
is a reference to the parents constructor()
function, that’s all it is.
We have to add super(props)
every single time we define a constructor()
function inside a class-based component.
If we don’t we will see an error saying that we have to call super(props)
.
The entire reason for defining this constructor()
funciton is to initialize our state object.
So in order to initialize our state object, underneath the super call I am going to write:
class App extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
// React says we have to define render()
render() {
return <div>Hello world</div>;
}
};
So we have defined our constructor()
method, initialized our state object by creating a JavaScript object, assigning a property or key/value pair to it, assigning the result of that to this.state
. Now of course this is just an example here so I have not really assigned a key/value pair to the state object, its just an empty object.
super()
is used to call the parent constructor.
super(props)
would pass props
to the parent constructor.
From your example, super(props)
would call the React.Component
constructor passing in props
as the argument.
More information on super
:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/super
Here we won't get this in the constructor so it will return undefined, but we will be able to fetch this outside the constructor function
class MyComponent extends React.Component {
constructor() {
console.log(this); // Reference Error i.e return undefined
}
render() {
return <div>Hello {this.props.name}</div>;
}
}
If we are using super(), then we can fetch the "this" variable inside the constructor as well
class MyComponent extends React.Component {
constructor() {
super();
console.log(this); // this logged to console
}
render() {
return <div>Hello {this.props.name}</div>;
}
}
So when we are using super(); we will be able to fetch this but this.props will be undefined in the constructor. But other than constructor, this.props will not return undefined.
If we use super(props), then we can use this.props value inside the constructor as well
Sophie Alpert's Answer
If you want to use this.props in the constructor, you need to pass props to super. Otherwise, it doesn’t matter because React sets .props on the instance from the outside immediately after calling the constructor.