From 9277f0612f5da254d741a324369d71d6b883fded Mon Sep 17 00:00:00 2001 From: Dustin Masters Date: Mon, 16 Oct 2017 16:51:42 -0700 Subject: [PATCH 1/4] Update constructor docs to include context --- content/docs/reference-react-component.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/content/docs/reference-react-component.md b/content/docs/reference-react-component.md index 7093ad92f15..8010a4057ba 100644 --- a/content/docs/reference-react-component.md +++ b/content/docs/reference-react-component.md @@ -136,18 +136,18 @@ render() { ### `constructor()` ```javascript -constructor(props) +constructor(props, context) ``` -The constructor for a React component is called before it is mounted. 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. +The constructor for a React component is called before it is mounted. 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. Optionally, if you need access to context in your component, call `super(props, context)`. The constructor is the right place to initialize state. If you don't initialize state and you don't bind methods, you don't need to implement a constructor for your React component. It's okay to initialize state based on props. This effectively "forks" the props and sets the state with the initial props. Here's an example of a valid `React.Component` subclass constructor: ```js -constructor(props) { - super(props); +constructor(props, context) { + super(props, context); this.state = { color: props.initialColor }; @@ -269,7 +269,7 @@ A class component becomes an error boundary if it defines this lifecycle method. For more details, see [*Error Handling in React 16*](/blog/2017/07/26/error-handling-in-react-16.html). > Note -> +> > Error boundaries only catch errors in the components **below** them in the tree. An error boundary can’t catch an error within itself. * * * From 2e115b87a6b855cc63426915fef141f4ede5f7a7 Mon Sep 17 00:00:00 2001 From: Dustin Masters Date: Tue, 17 Oct 2017 11:52:25 -0700 Subject: [PATCH 2/4] Link to context page --- content/docs/reference-react-component.md | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/content/docs/reference-react-component.md b/content/docs/reference-react-component.md index 8010a4057ba..a4e77e156bb 100644 --- a/content/docs/reference-react-component.md +++ b/content/docs/reference-react-component.md @@ -136,18 +136,18 @@ render() { ### `constructor()` ```javascript -constructor(props, context) +constructor(props) ``` -The constructor for a React component is called before it is mounted. 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. Optionally, if you need access to context in your component, call `super(props, context)`. +The constructor for a React component is called before it is mounted. 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. The constructor is the right place to initialize state. If you don't initialize state and you don't bind methods, you don't need to implement a constructor for your React component. It's okay to initialize state based on props. This effectively "forks" the props and sets the state with the initial props. Here's an example of a valid `React.Component` subclass constructor: ```js -constructor(props, context) { - super(props, context); +constructor(props) { + super(props); this.state = { color: props.initialColor }; @@ -158,6 +158,15 @@ Beware of this pattern, as state won't be up-to-date with any props update. Inst If you "fork" props by using them for state, you might also want to implement [`componentWillReceiveProps(nextProps)`](#componentwillreceiveprops) to keep the state up-to-date with them. But lifting state up is often easier and less bug-prone. +Some libraries, such as React Router, may depend on [context](/docs/context.html) being available. If you implement a constructor and need context, make sure to call `super(props, context)`. + +```js +constructor(props, context) { + super(props, context); + // other component initialization logic +} +``` + * * * ### `componentWillMount()` From 33346e381d574a2a3ccd26fc306e51fdea2aa62f Mon Sep 17 00:00:00 2001 From: Dustin Masters Date: Tue, 17 Oct 2017 11:55:48 -0700 Subject: [PATCH 3/4] Move context warning to a note --- content/docs/reference-react-component.md | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/content/docs/reference-react-component.md b/content/docs/reference-react-component.md index a4e77e156bb..98f1791b125 100644 --- a/content/docs/reference-react-component.md +++ b/content/docs/reference-react-component.md @@ -158,14 +158,9 @@ Beware of this pattern, as state won't be up-to-date with any props update. Inst If you "fork" props by using them for state, you might also want to implement [`componentWillReceiveProps(nextProps)`](#componentwillreceiveprops) to keep the state up-to-date with them. But lifting state up is often easier and less bug-prone. -Some libraries, such as React Router, may depend on [context](/docs/context.html) being available. If you implement a constructor and need context, make sure to call `super(props, context)`. - -```js -constructor(props, context) { - super(props, context); - // other component initialization logic -} -``` +> Note +> +> Some libraries, such as React Router, may depend on [context](/docs/context.html) being available. If you implement a constructor and need context, make sure to call `super(props, context)` from the [constructor](/docs/context.html#referencing-context-in-lifecycle-methods). * * * From 12d8a2d805a5125bb0a0e25d6b4cc87de01af4e0 Mon Sep 17 00:00:00 2001 From: Dustin Masters Date: Wed, 18 Oct 2017 10:42:54 -0700 Subject: [PATCH 4/4] Reword --- content/docs/reference-react-component.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/reference-react-component.md b/content/docs/reference-react-component.md index 98f1791b125..166ff479d59 100644 --- a/content/docs/reference-react-component.md +++ b/content/docs/reference-react-component.md @@ -160,7 +160,7 @@ If you "fork" props by using them for state, you might also want to implement [` > Note > -> Some libraries, such as React Router, may depend on [context](/docs/context.html) being available. If you implement a constructor and need context, make sure to call `super(props, context)` from the [constructor](/docs/context.html#referencing-context-in-lifecycle-methods). +> Some libraries, such as React Router, might use [context](/docs/context.html) to facilitate communication between components. If you implement a [constructor](/docs/context.html#referencing-context-in-lifecycle-methods) and use one of these libraries, make sure to call `super(props, context)` from the constructor so that `context` is available on the component. * * *