Update tutorial to match class component docs #9990
Conversation
According to the docs, class components should always call the base constructor with props. Update the tutorial to reflect this. https://facebook.github.io/react/docs/state-and-lifecycle.html#adding-local-state-to-a-class
docs/tutorial/tutorial.md
Outdated
| @@ -216,7 +216,7 @@ class Square extends React.Component { | |||
| } | |||
| ``` | |||
|
|
|||
| In [JavaScript classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes), you need to explicitly call `super();` when defining the constructor of a subclass. | |||
| In [JavaScript classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes), you need to explicitly call `super();` when defining the constructor of a subclass. When creating a class component in React, you should always call the base constructor with `props`. | |||
There was a problem hiding this comment.
What do you think of:
When extending a class component in React, always call the base constructor with
props.
There was a problem hiding this comment.
This isn't true though. Passing props to super is only required when access this.props in the constructor, which is pointless since you can just access props from the constructor args.
There was a problem hiding this comment.
Ah, that's true. It may not be necessary, but excluding props also might still be outside of the intended contract for the React.Component constructor. Other docs do state that props should always be passed to super.
So there's inconsistency here. It might not matter, but I'm curious for @gaearon's take here. Is calling super() without passing props problematic for present or future versions of React?
If a hard fast rule of "always all React.Component.constructor with props" isn't true, we should take a pass to clear up the ambiguity.
There was a problem hiding this comment.
Sorry to be pedantic, but this shows up again in the API documentation for React.Component.prototype.constructor:
https://facebook.github.io/react/docs/react-component.html#constructor
When implementing the constructor for a React.Component subclass, you should call super(props) before any other statement. Otherwise, this.props will be undefined in the constructor, which can lead to bugs.
|
Thanks for the review, @nhunzaker - agree with your suggested phrasing. |
There was a problem hiding this comment.
This looks good on my end, but I'd like to hear back about whether or not we want to continue to formally mandate props be passed to super. As @milesj as mentioned, this isn't technically necessary.
@sebmarkbage Any thoughts? When a class extends from React.Component, should it always call super(props)? Is omitting props a breach of contract?
|
The reason you might want to ensure that props is passed to class Foo extends Component {
state = { value: this.props.defaultValue };
constructor(props) {
super(props);
}
}However, if you have field initializers you shouldn't need the constructor at all. |
|
I think we decided our Flow typings would mandate passing props up though so maybe we should do it in the example too. I'm supportive unless @sebmarkbage thinks this is worse. |
|
Seems fine to me. |
|
We'd also need to update the fiddles.. sigh |
|
Thank you for filing this PR! I'm sorry to be the bearer of bad news, but the documentation and source code for reactjs.org now lives in a different repository: reactjs/reactjs.org. (For more info on why we made this move, see issue #11075.) It looks like the change to explicitly show |
According to the docs, class components should always call the base constructor with props. Update the tutorial to reflect this.