Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

An update on async rendering #596

Merged
merged 64 commits into from
Mar 27, 2018
Merged
Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
64 commits
Select commit Hold shift + click to select a range
544c0bc
Migrated async update from Quip to Markdown
bvaughn Feb 6, 2018
e298b47
Wordsmithing
bvaughn Feb 6, 2018
9ff0f12
Split StrictMode into its own top level docs page
bvaughn Feb 6, 2018
0674c34
Added string ref section to strict mode page
bvaughn Feb 6, 2018
cdb4b9e
Added TOC header links to Strict Mode page
bvaughn Feb 6, 2018
289a2da
Prettier
bvaughn Feb 6, 2018
99fedea
Wording changes in response to PR feedback
bvaughn Feb 6, 2018
49464f7
Removed some unnecessary parens
bvaughn Feb 6, 2018
fe6b133
Add Dan as an author to "Update on Async"
bvaughn Feb 6, 2018
1314117
Wording improvements in response to Dan's feedback
bvaughn Feb 7, 2018
f005c04
Wordsmithing
bvaughn Feb 7, 2018
06d5be4
Prettier
bvaughn Feb 7, 2018
3696388
Increased Prettier line-width for examples
bvaughn Feb 7, 2018
ac23b1f
Trigger Netlify rebuild
bvaughn Feb 7, 2018
5cae7c6
Strict Mode blog title capitalization
bvaughn Feb 7, 2018
f70c0dd
Minor wordsmithing
bvaughn Feb 7, 2018
c1e67be
Wordsmithing in response to PR feedback
bvaughn Feb 12, 2018
75a43aa
Wordsmithing in response to PR feedback
bvaughn Feb 12, 2018
fb3b91f
Add explanation for render and commit lifecycles
bvaughn Feb 12, 2018
60d65ce
Wordsmithing
bvaughn Feb 12, 2018
f632f22
Wording changes for update-on-async and strict-mode
bvaughn Feb 13, 2018
626ac42
Moved StrictMode to docs rather than blog post
bvaughn Feb 13, 2018
7456327
Combined notes about react-lifecycles-compat
bvaughn Feb 13, 2018
2909738
Address more Sophie feedback
bvaughn Feb 13, 2018
5400338
Updated data-fetching example to show cWRP too
bvaughn Feb 13, 2018
813be17
Updated docs/recipes in response to a new GH question
bvaughn Feb 14, 2018
8de7dc4
Updated recipes to show updating/removing subscriptions
bvaughn Feb 16, 2018
c45fb40
Triggering rebuild of Netlify
bvaughn Feb 21, 2018
858c1a7
Fixed small error in example
bvaughn Feb 21, 2018
98d5a09
Added gDSFP to example
bvaughn Feb 21, 2018
442591c
Added example of updating subscription from props
bvaughn Feb 22, 2018
b1ce572
Typo
bvaughn Feb 23, 2018
2312173
Moved updating-subscription example into an external Gist with a note
bvaughn Feb 28, 2018
16eb646
Fixed typo
bvaughn Feb 28, 2018
4d16523
Typo
bvaughn Feb 28, 2018
9905159
Merge branch 'master' into update-on-async-rendering
bvaughn Mar 7, 2018
1ca6cfc
Moved async update blog post to a later, random date
bvaughn Mar 7, 2018
7408e07
Remoaved 'What can asynchronous rendering do?' section and instead li…
bvaughn Mar 7, 2018
3c75def
Deleted StrictMode and examples/images
bvaughn Mar 7, 2018
55650fc
Added explicit null value in state initializer
bvaughn Mar 15, 2018
97a109d
Added a note about experimental class properties usage in examples
bvaughn Mar 15, 2018
21fa116
Removed StrictMode from side nav
bvaughn Mar 16, 2018
92cf72d
Hardened wording a bit around async
bvaughn Mar 20, 2018
fa34fcf
16.4 -> 16.x
bvaughn Mar 22, 2018
b3bf0bd
Added getSnapshotBeforeUpdate recipe
bvaughn Mar 23, 2018
254fc8b
Wordsmithing nits
bvaughn Mar 23, 2018
b0c22f7
Wording tweak
bvaughn Mar 23, 2018
558d576
Reworked introduction
bvaughn Mar 24, 2018
7425aed
Typofix
bvaughn Mar 24, 2018
65b1496
Typo
bvaughn Mar 24, 2018
6eae811
Tweaks to async post
gaearon Mar 24, 2018
a2139de
Add a note about suspense
gaearon Mar 24, 2018
030980e
Merge pull request #6 from gaearon/tweaks-async-post
bvaughn Mar 24, 2018
e110ac5
Added a small TOC for examples
bvaughn Mar 24, 2018
ce060eb
Imported theme style tweaks from PR 587
bvaughn Mar 24, 2018
e143823
Added create-subscription example
bvaughn Mar 24, 2018
65eca09
Tweaks
bvaughn Mar 25, 2018
a3ea63a
Merge branch 'master' into update-on-async-rendering
bvaughn Mar 27, 2018
7ced9ce
Renamed blog post
bvaughn Mar 27, 2018
7cf5b58
Wordsmithing
bvaughn Mar 27, 2018
9f72403
Updated gradual migration note
bvaughn Mar 27, 2018
712f4de
Changed wording about app developer to React app developer
bvaughn Mar 27, 2018
4610392
Changes in response to Sophie's feedback
bvaughn Mar 27, 2018
b824bd2
Added getSnapshotBeforeUpdate to the polyfill notes
bvaughn Mar 27, 2018
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it's important to point out our migration path isn't "tell every product team to set everything aside and start fixing their components". People commonly assume that we have this kind of power at Facebook and that product teams just go ahead and spend months catching up with our recommendations (and a "small company wouldn't be able to do this"). So I would prefer if we were very clear in our wording that this is not the case.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hm. Gotcha.

I don't think the previous wording, "we can't rewrite our apps", conveyed that. (It didn't really make sense to me.)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure—you're a native speaker so I was just trying to give you the context into what I was trying to express.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry, I wasn't trying to criticize the wording or say it didn't sound native. I just don't think it conveyed the meaning you are wanting to convey.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How about:

We maintain over 50,000 React components at Facebook, and we don’t plan to rewrite them all immediately. We understand that migrations take time. We will take the gradual migration path along with everyone in the React community.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice, I like it


---

Expand Down Expand Up @@ -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)

Expand Down Expand Up @@ -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

Expand Down
Original file line number Diff line number Diff line change
@@ -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
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

IMO the highlighting in this code sample is distracting and I can't tell why some lines are highlighted and not others. I'd just drop all the highlights in this file especially since it isn't really a before/after and ~all the lines are significant.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cool. I was on the fence about this to begin with.

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);
};
},
});
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down