From 9113b4c8290ec138905c1b32cddcf0c91f7a7a6b Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Tue, 27 Mar 2018 19:24:52 -0700 Subject: [PATCH 1/3] Fixed example props/prevProps --- .../updating-external-data-when-props-change-after.js | 8 ++++---- .../updating-external-data-when-props-change-before.js | 8 ++++---- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/examples/update-on-async-rendering/updating-external-data-when-props-change-after.js b/examples/update-on-async-rendering/updating-external-data-when-props-change-after.js index 014a3c61..2426bc9a 100644 --- a/examples/update-on-async-rendering/updating-external-data-when-props-change-after.js +++ b/examples/update-on-async-rendering/updating-external-data-when-props-change-after.js @@ -20,13 +20,13 @@ class ExampleComponent extends React.Component { } componentDidMount() { - this._loadAsyncData(); + this._loadAsyncData(this.props.id); } // highlight-range{1-5} componentDidUpdate(prevProps, prevState) { if (prevState.externalData === null) { - this._loadAsyncData(); + this._loadAsyncData(this.props.id); } } @@ -44,8 +44,8 @@ class ExampleComponent extends React.Component { } } - _loadAsyncData() { - this._asyncRequest = asyncLoadData(this.props.id).then( + _loadAsyncData(id) { + this._asyncRequest = asyncLoadData(id).then( externalData => { this._asyncRequest = null; this.setState({externalData}); diff --git a/examples/update-on-async-rendering/updating-external-data-when-props-change-before.js b/examples/update-on-async-rendering/updating-external-data-when-props-change-before.js index 0b0af809..aa22358c 100644 --- a/examples/update-on-async-rendering/updating-external-data-when-props-change-before.js +++ b/examples/update-on-async-rendering/updating-external-data-when-props-change-before.js @@ -5,14 +5,14 @@ class ExampleComponent extends React.Component { }; componentDidMount() { - this._loadAsyncData(); + this._loadAsyncData(this.props.id); } // highlight-range{1-6} componentWillReceiveProps(nextProps) { if (nextProps.id !== this.props.id) { this.setState({externalData: null}); - this._loadAsyncData(); + this._loadAsyncData(nextProps.id); } } @@ -30,8 +30,8 @@ class ExampleComponent extends React.Component { } } - _loadAsyncData() { - this._asyncRequest = asyncLoadData(this.props.id).then( + _loadAsyncData(id) { + this._asyncRequest = asyncLoadData(id).then( externalData => { this._asyncRequest = null; this.setState({externalData}); From 161339b15a2c07a25067c894a09bdaa83d529f1c Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Tue, 27 Mar 2018 19:29:55 -0700 Subject: [PATCH 2/3] Added a note about SSR / cWM --- content/blog/2018-03-27-update-on-async-rendering.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/content/blog/2018-03-27-update-on-async-rendering.md b/content/blog/2018-03-27-update-on-async-rendering.md index d852a02a..1461003a 100644 --- a/content/blog/2018-03-27-update-on-async-rendering.md +++ b/content/blog/2018-03-27-update-on-async-rendering.md @@ -94,6 +94,10 @@ There is a common misconception that fetching in `componentWillMount` lets you a > > In the longer term, the canonical way to fetch data in React components will likely be based on the “suspense” API [introduced at JSConf Iceland](/blog/2018/03/01/sneak-peek-beyond-react-16.html). Both simple data fetching solutions and libraries like Apollo and Relay will be able to use it under the hood. It is significantly less verbose than either of the above solutions, but will not be finalized in time for the 16.3 release. +> Note +> +> When supporting server rendering, it's currently necessary to provide the data synchronously. `componentWillMount` was often used for this purpose, but the `constructor` can be used as a replacement. The upcoming suspense APIs will add a way to do async data fetching cleanly for both client and server rendering. + ### Adding event listeners (or subscriptions) Here is an example of a component that subscribes to an external event dispatcher when mounting: From 703a145489a183f3d1b9340a999fe65e0b6d1941 Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Tue, 27 Mar 2018 19:39:11 -0700 Subject: [PATCH 3/3] Revert "Added a note about SSR / cWM" This reverts commit 161339b15a2c07a25067c894a09bdaa83d529f1c. --- content/blog/2018-03-27-update-on-async-rendering.md | 4 ---- 1 file changed, 4 deletions(-) diff --git a/content/blog/2018-03-27-update-on-async-rendering.md b/content/blog/2018-03-27-update-on-async-rendering.md index 1461003a..d852a02a 100644 --- a/content/blog/2018-03-27-update-on-async-rendering.md +++ b/content/blog/2018-03-27-update-on-async-rendering.md @@ -94,10 +94,6 @@ There is a common misconception that fetching in `componentWillMount` lets you a > > In the longer term, the canonical way to fetch data in React components will likely be based on the “suspense” API [introduced at JSConf Iceland](/blog/2018/03/01/sneak-peek-beyond-react-16.html). Both simple data fetching solutions and libraries like Apollo and Relay will be able to use it under the hood. It is significantly less verbose than either of the above solutions, but will not be finalized in time for the 16.3 release. -> Note -> -> When supporting server rendering, it's currently necessary to provide the data synchronously. `componentWillMount` was often used for this purpose, but the `constructor` can be used as a replacement. The upcoming suspense APIs will add a way to do async data fetching cleanly for both client and server rendering. - ### Adding event listeners (or subscriptions) Here is an example of a component that subscribes to an external event dispatcher when mounting: