Menu
I know that this question was asked many times, but it is still doesn't clear. Many people just said:
Pass props to constructor if you want to access
this.propsthere
one more example of the answer
Oficial doc says Class components should always call the base constructor with props. , but if we do not pass props to constructor, we will still have this.props everywhere exept constructor.
Also from react source code we can see source code of the React.Component
function ReactComponent(props, context) {
this.props = props;
this.context = context;
}
But it is confuses me even more.
super() should be called with two parametrs: props and context . But we invoked our super empty and still have access two this.props.
According to ECMA documentation super() invokes parent constructor() with parametrs passed to super() . But our super() is empty.
So my questions are:
Class components should always call the base constructor with props.
props to child component if super() and constructor() is empty? super() and constructor()?
380
Before going deep into the main difference, let us understand what is Super() and Props as shown below: Super(): It is used to call the constructor of its parent class. This is required when we need to access some variables of its parent class. Props: It is a special keyword that is used in react stands for properties.
props in a Constructor function. In fact, what the super() function does is, calls the constructor of the parent class. Syntax: There's nothing complex in using super(props), we just have to call super(props) in the constructor method of our child class component, like so: class Checkbox extends React.
Super() function calls the constructor of the parent class. Using super constructor with props arguments basically allows accessing this. props in a Constructor function. Let us create a React project and then we will create a UI to showcase the above purpose.
In React, the constructor is called during component creation and before mounting. If you want to implement the constructor for a React component, call the super(props) method before any other statement. Otherwise, this. props will be undefined in the constructor and create bugs.
Here is an answer from Dan Abramov:
But if we do not pass
propstoconstructor, we will still havethis.propseverywhere exceptconstructor.
Yes, React sets this.props anyway after the constructor runs. Still, it is confusing to have this.props work in some places and not others. Especially if both constructor and other methods call some shared method that reads this.props. So, to avoid any potential confusion, we recommend always calling super(props).
Also from source code of
Create Elementyou can see thatcreateElementadds props regardless if you usesuper(props)
createElement() has no relation to this question. It creates an element, not an instance.
So, to get back to your question, technically it's only necessary if you plan to access this.props in the constructor or any method you call from constructor. However it's pretty confusing to have to remember this. You might know about it and not call super(props), but the next person on your team will want to access this.props in a constructor and will be surprised it doesn't work. It's just easier to always specify it to avoid these problems.
183
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
