Browse Source

Wordsmithing in response to PR feedback

main
Brian Vaughn 7 years ago
parent
commit
c1e67bec90
  1. 4
      content/blog/2018-02-07-update-on-async-rendering.md
  2. 6
      examples/update-on-async-rendering/adding-event-listeners-after.js
  3. 6
      examples/update-on-async-rendering/adding-event-listeners-before.js

4
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).

6
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});
};
}

6
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});
};
}

Loading…
Cancel
Save