Why does react class component always need to call super(props) in its constructor?

Question

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.

React aside, you should always be calling the parent constructor with the arguments it expects. You cannot assume that not calling the parent constructor will be fine. — Felix Kling, Jan 30 '19 at 06:00
Well, I think my question is on the `props` part, not the `super()` part. However, I am very surprised to get a lot of knowledge from answers concerning the `super()` part. — Lil E, Jan 30 '19 at 06:37

score 7 · Accepted Answer · answered Jan 30 '19 at 05:57

Although it is suggested to pass props to super but 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.

It might also be worth mentioning [what the `super` constructor actually does](https://github.com/facebook/react/blob/ba6477aa3cc0b189f4c9b805bf20edb2a2d94e91/packages/react/src/ReactBaseClasses.js#L21-L29) - namely it sets `this.props`, `this.context`, and some internal data structures. — Birjolaxew, Jan 30 '19 at 10:25

score 1 · Answer 2 · answered Jan 30 '19 at 06:38

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)

score 0 · Answer 3 · answered Jan 30 '19 at 05:56

0

This is because you are initializing the parent component React.Component e.g. this.props will be undefined. You can find detailed explanation for why we are using it in blog by Dan Abramov, react engineer

answered Jan 30 '19 at 05:56

Umair Farooq

1,763
13
16

Praveen Rao Chavan.G · Answer 4 · 2019-01-30T07:23:29.673

In simple words, its used to call your parent class constructor which is very much required, when calling super(), it actually calls the parent class constructor and also in ES class constructor must have super() when its a subclass andsuper() is required only when you have a constructor explicitly.

Super() not required

class TestApp extends React.component{
   render(){
      return <div>I don't need a super()</div>
   }
}

Super() required

class TestApp extends React.component{
   constructor(){
     super(); // here super is required becuase it calls the parent class constructor //
   }

   render(){
      return <div>I don't need a super()</div>
   }
}

Using super() you can also pass props super(props) to the parent class, in this case, props will be accessible across components via this.props.

score -1 · Answer 5 · answered Jan 30 '19 at 05:58

It is not necessary Is super necessary?

since class Clock extends React.Component, you can access all the properties and methods of React.Component.

By calling super, you are actually calling the parent element with props parameter

If you intend on using this.props inside the constructor, you have to call super(props)

Why does react class component always need to call super(props) in its constructor?

5 Answers5