Constructor(props) and super(props) VS constructor() and super() in React

8
votes

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:

  1. Why official docs says:

Class components should always call the base constructor with props.

  1. How React set props to child component if super() and constructor() is empty?
  2. Is it bug of feature of the React that props are accessible in child component without passing props to super() and constructor()?
2
javascriptreactjsecmascript-6es6-class
A compromise: constructor(...args) { super(...args); } – zerkms
Why are you viewing such outdated source code? – Andrew Li
github.com/facebook/react/blob/master/packages/react/src/…: createElement adds props regardless if you use super(props). – Andrew Li
@ Li357 Thanks for the link to the new source code. So current React doc is wrong or what? There is no need to call constructor always with props ? – mr__brainwash
Sorry, but does anyone know the answer? – mr__brainwash

2 Answers

3
votes

Here is an answer from Dan Abramov:

But if we do not pass props to constructor, we will still have this.props everywhere except constructor.

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 that createElement adds props regardless if you use super(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.

0
votes

If no constructor is defined in the code for a react component you can assume it will be automatically bound behind the scenes, such as:

constructor(props){
    super(props);
}

Once you have explicitly defined a constructor you must remember to always put that code in otherwise it will be left out... you are basically just overriding a default method :)