Menu
In the tutorial published by reactjs.org, it was stated that "Class components should always call the base constructor with props". In my own research, it seems that super(props) can be replaced by super() if this.props is not used in the constructors, according to this StackOverflow answer.
Therefore, my question is, why should we always pass in props to base constructor in reactjs? Is the advice sound? Why is the advice sound (or not sound)?
P.S. A screenshot is uploaded to this question just in case the original tutorial is updated while this question is being answered.
366
super() will call the constructor of its parent class. This is required when you need to access some variables from the parent class. Hope this helps!
The super() is used inside the constructor for the purpose to get access to this keyword inside our constructor. With this let's try to understand super() first. 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.
The constructor for a React component is called before it is mounted. 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.
Defining constructor and calling super(props) was always intended to be a temporary solution until class fields provide an ergonomic alternative.
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. class TodoApp extends React.Component { constructor(){ super(); console.log(this.props); // this will be undefined } ... }
By calling super (props), you are calling the constructor of React.Component. Which means that super () is a reference to the parent class constructor () which in the above case is of React.Component which is the base class of Component Clock. When you pass props to super, the props get assigned to this. Another thing is that:
Defining constructor and calling super (props) was always intended to be a temporary solution until class fields provide an ergonomic alternative. But let’s get back to this example using only ES2015 features: Why do we call super? Can we not call it? If we have to call it, what happens if we don’t pass props? Are there any other arguments?
147 super()will call the constructorof its parentclass. This is required when you need to access some variables from the parent class. In React, when you call superwith props, React will make propsavailable across the component through this.props.
Although it is suggested to pass props to
superbut it isn't strictly necessary.
Passing it just helps in an odd situation where you might have a called a method in constructor and then at some point of time in future decided to use props in it. Now since props aren't available in the constructor since you haven't passed props to super, it would result in an error. This kind of situation might be tricky to debug and hence its recommended to pass props always whenever you write a constructor so that it ensures this.props is set even before the constructor exits.
57
In JavaScript, super refers to the parent class constructor.
Why do we call super? Can we not call it? If we have to call it, what happens if we don’t pass props? Are there any other arguments?
Read the article that is linked below to get the answers for the above questions.
Read the article from Dan Abramov (Works at React JS team)
37
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
