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.props
there
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()
?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
props
toconstructor
, we will still havethis.props
everywhere 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 Element
you can see thatcreateElement
adds 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.
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