4

I'm trying to learn react.

The documentation for react says to pass constructor arguments as follows. 

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }


  render() {

This post says the reason to reference super in that function is you might need to have props in super() if you want to access this.props in the constructor.

But - if you don't need to do that, and you just need to initialise state, do you still need the super() line?

I have seen a lot of tutorials that define it as follows:

class Basic extends React.Component {
  state = {
    selectedValue: null,
    createdAt: null
  };

I can't find a reference to why this is acceptable. Do you need super, even if you don't need props in the constructor?

Mel
  • 2,481
  • 26
  • 113
  • 273

2 Answers2

1

The snippet uses class fields proposal.

class Comp extends React.Component {
  this.state = {...};
  ...
}

is syntactic sugar for

class Comp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {...};
  }
}

In case a class doesn't need explicit constructor, constructor can be omitted. In case it needed explicit constructor, it should contain super(props) because it's required to properly inherit from React.Component.

Estus Flask
  • 206,104
  • 70
  • 425
  • 565
  • Hi - I don't know which bit of the document you linked is relevant. The first example in that document still uses constructor() { super(); this.onclick = this.clicked.bind(this); this.x = 0; } – Mel May 08 '19 at 09:07
  • Read it further. It explains that first example you mentioned is desugared ES2015, and second example is sugared ES.next and replaces `this.x =` with `x =`. – Estus Flask May 08 '19 at 09:10
  • Are you referring to this paragraph: In the above example, you can see a field declared with the syntax x = 0. You can also declare a field without an initializer as x. By declaring fields up-front, class definitions become more self-documenting; instances go through fewer state transitions, as declared fields are always present. ? If so, where do I find a translation guide to figure out the jargon? – Mel May 08 '19 at 09:13
  • 'Fields' are defined in the proposal itself, https://tc39.github.io/proposal-class-fields/ . The rest seem to be regular programming terminology. As for me, the difference between snippets speaks for itself. `this.x =` becomes `x =`. – Estus Flask May 08 '19 at 09:22
  • No idea what you mean. Thanks for trying to help but you're too smart for me to keep up with. – Mel May 08 '19 at 09:24
  • Are you saying the react documentation is deprecated by developments in regular programming? – Mel May 08 '19 at 09:24
  • React documentation was written by different contributors at different time. I cannot say why `constructor(props) { super(props);` is there, it could be added to give a better impression what's going on if a reader isn't familiar with class fields (which are supported in React toolchain but aren't standardized and thus aren't valid JS yet). Any way, `constructor` can be skipped in almost all components, including this one, this also allows to avoid very common mistake, `constructor(props) { super()` (no props argument for super). – Estus Flask May 08 '19 at 09:32
  • Thanks. I found this. It helps. I didn't realise the react documents weren't best practice guidelines. https://overreacted.io/why-do-we-write-super-props/ – Mel May 08 '19 at 21:59
0

This requirement doesn't related with React it's related with new ECMAScript 2015 Classes.

Look the Inheritance syntax section at this mozilla article;

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Inheritance#Inheritance_with_class_syntax

When you create a new react component you need inherit from React.Component class. So if you need to define a constructor for your class you need call super otherwise don't need it.

Metehan Senol
  • 651
  • 4
  • 10
  • Okay -so are you saying that if it's not a subclass, then there is no need to use constructor? – Mel May 08 '19 at 09:07
  • I'm trying to figure out when I need to define a constructor. – Mel May 08 '19 at 09:08
  • Absolutely yes. Look at the above article. – Metehan Senol May 08 '19 at 09:08
  • If you need some initialization for you class like your state. You define a constructor. So if you defined a constructor you need call super because of you inherit from React.Component class. That's a requirement for ES2015 classes. – Metehan Senol May 08 '19 at 09:11
  • What are you saying 'yes' to? I've read that document about 5 times today. Are you saying that if I don't need a subclass on my private class, then no need for a constructor, or are you saying that because everything inherits from react, that it's always needed? – Mel May 08 '19 at 09:11
  • It doesn't related to whether you need a constructor or don't. I say if you inherit from a parent class and if you need a constructor you have to call super. When you write a class and you don't inherit from any parent class so you don't need calling super you can define a constructor anyway. – Metehan Senol May 08 '19 at 09:15
  • I don't understand what you mean. Thanks for trying to help, but I haven't communicated my question to you clearly, obviously. – Mel May 08 '19 at 09:16
  • Sure not problem. Sorry I was write careless. I've edited again my comment. – Metehan Senol May 08 '19 at 09:21
  • Still don't understand what you mean. I'm trying to figure out when I need a constructor. – Mel May 08 '19 at 09:23
  • If question is "when do I need a constructor?" it's about your business. – Metehan Senol May 08 '19 at 09:25
  • No idea what you mean. I don't think we are communicating clearly. Thank you for trying to help. I'll try to figure out what's happening in the constructor and update this post with an answer when I come up with an understanding. I appreciate your effort to try to help. – Mel May 08 '19 at 09:27