Difference between super() and super(props) in constructor of a React Class Component ?
When creating Class Components in React, we often call super in the constructor of the Component and also pass in props to it. But do we really need to do this ? I mean pass props to super.
Well, React Documentation recommends —
Class components should always call the base constructor with props.
and ES6 Classes have to call super if they are subclasses.
But why pass props to super ? It’s because if we want to use this in the constructor, we need to pass it to super.
class MyComponent extends React.Component {
constructor(props) {
super();
console.log(this.props); // undefined
console.log(props); // defined
}render() {
return <div>Hello {this.props.message}</div>; // defined
}
}
However if we use super(props)
class MyComponent extends React.Component {
constructor(props) {
super(props);
console.log(this.props); // props will get logged.
}render() {
return <div>Hello {this.props.message}</div>; // defined
}
}
So, to conclude, If you want to use this.props inside constructor, you need to pass it in super, otherwise it’s okay to not pass props to super as we see that irrespective of passing it to super, this.props is available inside render function.
Credits:
You can check out this awesome stackoverflow discussion for more details:
https://stackoverflow.com/questions/30571875/whats-the-difference-between-super-and-superprops-in-react-when-using-e
Checkout my other posts:
