From c1e67bec90739f2dea51af13863932a0898540f9 Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Mon, 12 Feb 2018 09:06:10 -0800 Subject: [PATCH] Wordsmithing in response to PR feedback --- content/blog/2018-02-07-update-on-async-rendering.md | 4 +++- .../adding-event-listeners-after.js | 6 +++--- .../adding-event-listeners-before.js | 6 +++--- 3 files changed, 9 insertions(+), 7 deletions(-) diff --git a/content/blog/2018-02-07-update-on-async-rendering.md b/content/blog/2018-02-07-update-on-async-rendering.md index 69d71fe5..7f50ce37 100644 --- a/content/blog/2018-02-07-update-on-async-rendering.md +++ b/content/blog/2018-02-07-update-on-async-rendering.md @@ -39,7 +39,7 @@ In the next section, we'll look at how to update your existing components to pre ## Updating class components -#### If you're an application developer, **you don't have to do anything about the deprecated methods yet**. The primary purpose of this update (v16.3) is to enable open source project maintainers to update their libraries in advance of any deprecation warnings. Those warnings will be enabled with the next minor release, v16.4. +#### If you're an application developer, **you don't have to do anything about the legacy methods yet**. The primary purpose of this update (v16.3) is to enable open source project maintainers to update their libraries in advance of any deprecation warnings. Those warnings will be enabled with the next minor release, v16.4. However, if you'd like to start using the new component API (or if you're a maintainer looking to update your library in advance) here are a few examples that we hope will help you to start thinking about components a bit differently. Over time, we plan to add additional "recipes" to our documentation that show how to perform common tasks in a way that's async-safe. @@ -61,6 +61,8 @@ The above code is problematic for both server rendering (where the external data The upgrade path for this is to move data-fetching into `componentDidMount`: `embed:update-on-async-rendering/fetching-external-data-after.js` +There is a common misconception that fetching in `componentWillMount` lets you avoid the first empty rendering state. In practice this was never true because React has always executed `render` immediately after `componentWillMount`. If the data is not available by the time `componentWillMount` fires, the first `render` will still show a loading state regardless of where you initiate the fetch. This is why moving the fetch to `componentDidMount` has no perceptible effect in the vast majority of cases. + > Note: > > Some advanced use-cases (e.g. libraries like Relay) may want to experiment with eagerly prefetching async data. An example of how this can be done is available [here](https://gist.github.com/bvaughn/89700e525ff423a75ffb63b1b1e30a8f). diff --git a/examples/update-on-async-rendering/adding-event-listeners-after.js b/examples/update-on-async-rendering/adding-event-listeners-after.js index c3586fca..d6d09a1f 100644 --- a/examples/update-on-async-rendering/adding-event-listeners-after.js +++ b/examples/update-on-async-rendering/adding-event-listeners-after.js @@ -10,7 +10,7 @@ class ExampleComponent extends React.Component { // Event listeners are only safe to add after mount, // So they won't leak if mount is interrupted or errors. this.props.dataSource.subscribe( - this._onSubscriptionChange + this.handleSubscriptionChange ); // External values could change between render and mount, @@ -27,11 +27,11 @@ class ExampleComponent extends React.Component { componentWillUnmount() { this.props.dataSource.unsubscribe( - this._onSubscriptionChange + this.handleSubscriptionChange ); } - _onSubscriptionChange = subscribedValue => { + handleSubscriptionChange = subscribedValue => { this.setState({subscribedValue}); }; } diff --git a/examples/update-on-async-rendering/adding-event-listeners-before.js b/examples/update-on-async-rendering/adding-event-listeners-before.js index 9c383d78..c83da8a1 100644 --- a/examples/update-on-async-rendering/adding-event-listeners-before.js +++ b/examples/update-on-async-rendering/adding-event-listeners-before.js @@ -8,17 +8,17 @@ class ExampleComponent extends React.Component { // This is not safe; it can leak! this.props.dataSource.subscribe( - this._onSubscriptionChange + this.handleSubscriptionChange ); } componentWillUnmount() { this.props.dataSource.unsubscribe( - this._onSubscriptionChange + this.handleSubscriptionChange ); } - _onSubscriptionChange = subscribedValue => { + handleSubscriptionChange = subscribedValue => { this.setState({subscribedValue}); }; }