From 7cf5b581873a1359e807dff9cda2394a973a08d4 Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Tue, 27 Mar 2018 10:30:38 -0700 Subject: [PATCH] Wordsmithing --- .../blog/2018-03-27-update-on-async-rendering.md | 6 +++--- ...adding-event-listeners-create-subscription.js | 16 ++++++++-------- .../updating-state-from-props-after.js | 2 +- 3 files changed, 12 insertions(+), 12 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 74c3f87a..e6aaf7a1 100644 --- a/content/blog/2018-03-27-update-on-async-rendering.md +++ b/content/blog/2018-03-27-update-on-async-rendering.md @@ -23,7 +23,7 @@ These lifecycle methods have often been misunderstood and subtly misused; furthe **Note that if you're an application developer, you don't have to do anything about the legacy methods yet. The primary purpose of the upcoming version 16.3 release is to enable open source project maintainers to update their libraries in advance of any deprecation warnings. Those warnings will not be enabled until a future 16.x release.** -At Facebook, we maintain over 50,000 React components, so we're in the same boat as you. We can't rewrite our apps so we will take the gradual migration path together with everyone in the React community. +We maintain over 50,000 React components at Facebook, so we understand that migrations take time. We will take the gradual migration path together with everyone in the React community. --- @@ -88,7 +88,7 @@ There is a common misconception that fetching in `componentWillMount` lets you a > > 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). > -> 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 at the moment it is not quite ready yet. +> 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. ### Adding event listeners (or subscriptions) @@ -124,7 +124,7 @@ As of version 16.3, the recommended way to update `state` in response to `props` > Note > -> If you're writing a shared component, the [`react-lifecycles-compat`](https://github.com/reactjs/react-lifecycles-compat) polyfill enables the new lifecycle to be used with older versions of React as well. [Learn more about how to use it below.](#open-source-project-maintainers) +> If you're writing a shared component, the [`react-lifecycles-compat`](https://github.com/reactjs/react-lifecycles-compat) polyfill enables the new `getDerivedStateFromProps` lifecycle to be used with older versions of React as well. [Learn more about how to use it below.](#open-source-project-maintainers) ### Invoking external callbacks diff --git a/examples/update-on-async-rendering/adding-event-listeners-create-subscription.js b/examples/update-on-async-rendering/adding-event-listeners-create-subscription.js index 9b096070..fd03d0c3 100644 --- a/examples/update-on-async-rendering/adding-event-listeners-create-subscription.js +++ b/examples/update-on-async-rendering/adding-event-listeners-create-subscription.js @@ -1,26 +1,26 @@ import {createSubscription} from 'create-subscription'; const Subscription = createSubscription({ - getCurrentValue(source) { - // Return the current value of the subscription (source). + getCurrentValue(sourceProp) { + // Return the current value of the subscription (sourceProp). // highlight-next-line - return source.value; + return sourceProp.value; }, - subscribe(source, callback) { + subscribe(sourceProp, callback) { function handleSubscriptionChange() { - callback(dataSource.value); + callback(sourceProp.value); } - // Subscribe (e.g. add an event listener) to the subscription (source). + // Subscribe (e.g. add an event listener) to the subscription (sourceProp). // Call callback(newValue) whenever a subscription changes. // highlight-next-line - source.subscribe(handleSubscriptionChange); + sourceProp.subscribe(handleSubscriptionChange); // Return an unsubscribe method. // highlight-range{1-3} return function unsubscribe() { - source.unsubscribe(handleSubscriptionChange); + sourceProp.unsubscribe(handleSubscriptionChange); }; }, }); diff --git a/examples/update-on-async-rendering/updating-state-from-props-after.js b/examples/update-on-async-rendering/updating-state-from-props-after.js index fe5de411..19b920a9 100644 --- a/examples/update-on-async-rendering/updating-state-from-props-after.js +++ b/examples/update-on-async-rendering/updating-state-from-props-after.js @@ -7,7 +7,7 @@ class ExampleComponent extends React.Component { isScrollingDown: false, lastRow: null, }; - // highlight-line + // highlight-range{1-8} static getDerivedStateFromProps(nextProps, prevState) { if (nextProps.currentRow !== prevState.lastRow) {