-
Notifications
You must be signed in to change notification settings - Fork 7.6k
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
+637
−1
Merged
Changes from 1 commit
Commits
Show all changes
64 commits
Select commit
Hold shift + click to select a range
544c0bc
Migrated async update from Quip to Markdown
bvaughn e298b47
Wordsmithing
bvaughn 9ff0f12
Split StrictMode into its own top level docs page
bvaughn 0674c34
Added string ref section to strict mode page
bvaughn cdb4b9e
Added TOC header links to Strict Mode page
bvaughn 289a2da
Prettier
bvaughn 99fedea
Wording changes in response to PR feedback
bvaughn 49464f7
Removed some unnecessary parens
bvaughn fe6b133
Add Dan as an author to "Update on Async"
bvaughn 1314117
Wording improvements in response to Dan's feedback
bvaughn f005c04
Wordsmithing
bvaughn 06d5be4
Prettier
bvaughn 3696388
Increased Prettier line-width for examples
bvaughn ac23b1f
Trigger Netlify rebuild
bvaughn 5cae7c6
Strict Mode blog title capitalization
bvaughn f70c0dd
Minor wordsmithing
bvaughn c1e67be
Wordsmithing in response to PR feedback
bvaughn 75a43aa
Wordsmithing in response to PR feedback
bvaughn fb3b91f
Add explanation for render and commit lifecycles
bvaughn 60d65ce
Wordsmithing
bvaughn f632f22
Wording changes for update-on-async and strict-mode
bvaughn 626ac42
Moved StrictMode to docs rather than blog post
bvaughn 7456327
Combined notes about react-lifecycles-compat
bvaughn 2909738
Address more Sophie feedback
bvaughn 5400338
Updated data-fetching example to show cWRP too
bvaughn 813be17
Updated docs/recipes in response to a new GH question
bvaughn 8de7dc4
Updated recipes to show updating/removing subscriptions
bvaughn c45fb40
Triggering rebuild of Netlify
bvaughn 858c1a7
Fixed small error in example
bvaughn 98d5a09
Added gDSFP to example
bvaughn 442591c
Added example of updating subscription from props
bvaughn b1ce572
Typo
bvaughn 2312173
Moved updating-subscription example into an external Gist with a note
bvaughn 16eb646
Fixed typo
bvaughn 4d16523
Typo
bvaughn 9905159
Merge branch 'master' into update-on-async-rendering
bvaughn 1ca6cfc
Moved async update blog post to a later, random date
bvaughn 7408e07
Remoaved 'What can asynchronous rendering do?' section and instead li…
bvaughn 3c75def
Deleted StrictMode and examples/images
bvaughn 55650fc
Added explicit null value in state initializer
bvaughn 97a109d
Added a note about experimental class properties usage in examples
bvaughn 21fa116
Removed StrictMode from side nav
bvaughn 92cf72d
Hardened wording a bit around async
bvaughn fa34fcf
16.4 -> 16.x
bvaughn b3bf0bd
Added getSnapshotBeforeUpdate recipe
bvaughn 254fc8b
Wordsmithing nits
bvaughn b0c22f7
Wording tweak
bvaughn 558d576
Reworked introduction
bvaughn 7425aed
Typofix
bvaughn 65b1496
Typo
bvaughn 6eae811
Tweaks to async post
gaearon a2139de
Add a note about suspense
gaearon 030980e
Merge pull request #6 from gaearon/tweaks-async-post
bvaughn e110ac5
Added a small TOC for examples
bvaughn ce060eb
Imported theme style tweaks from PR 587
bvaughn e143823
Added create-subscription example
bvaughn 65eca09
Tweaks
bvaughn a3ea63a
Merge branch 'master' into update-on-async-rendering
bvaughn 7ced9ce
Renamed blog post
bvaughn 7cf5b58
Wordsmithing
bvaughn 9f72403
Updated gradual migration note
bvaughn 712f4de
Changed wording about app developer to React app developer
bvaughn 4610392
Changes in response to Sophie's feedback
bvaughn b824bd2
Added getSnapshotBeforeUpdate to the polyfill notes
bvaughn File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -3,27 +3,27 @@ title: Update on Async Rendering | |
author: [bvaughn] | ||
--- | ||
|
||
For the past few months, the React team has been working on [asynchronous rendering](/blog/2018/03/01/sneak-peek-beyond-react-16.html), and we are very excited about the new features it enables. | ||
For over a year, the React team has been working to implement asynchronous rendering. Last month during his talk at JSConf Iceland, [Dan unveiled some of the exciting new possibilities async rendering unlocks](/blog/2018/03/01/sneak-peek-beyond-react-16.html). Now we'd like to share with you some of the lessons we've learned while working on this feature, and some suggestions we have for preparing your components to be ready for async rendering when it launches. | ||
|
||
Along the way, we've learned that some of our legacy component lifecycles tend to encourage unsafe coding practices. They are: | ||
One of the biggest lesson we've learned is that some of our legacy component lifecycles tend to encourage unsafe coding practices. They are: | ||
|
||
* `componentWillMount` | ||
* `componentWillReceiveProps` | ||
* `componentWillUpdate` | ||
|
||
These lifecycle methods have often been misunderstood and subtly misused; furthermore, we anticipate that these potential problems may be more prominent with async rendering. Because of this, we are adding an "UNSAFE_" prefix to these lifecycles in a future release. | ||
These lifecycle methods have often been misunderstood and subtly misused; furthermore, we anticipate that their potential misuse may be more problematic with async rendering. Because of this, we will be adding an "UNSAFE_" prefix to these lifecycles in an upcoming release. | ||
|
||
[React follows semantic versioning](/blog/2016/02/19/new-versioning-scheme.html), so the migration path will be gradual: | ||
[React follows semantic versioning](/blog/2016/02/19/new-versioning-scheme.html), so this change will be gradual. Our current plan is: | ||
|
||
* **16.3**: Introduce aliases for the unsafe lifecycles, `UNSAFE_componentWillMount`, `UNSAFE_componentWillReceiveProps`, and `UNSAFE_componentWillUpdate`. (Both the old lifecycle names and the new aliases will work in this release.) | ||
* **16.x**: Enable deprecation warning for `componentWillMount`, `componentWillReceiveProps`, and `componentWillUpdate`. (Both the old lifecycle names and the new aliases will work in this release.) | ||
* **17.0**: Remove `componentWillMount`, `componentWillReceiveProps`, and `componentWillUpdate` . (Only the new "UNSAFE_" lifecycle names will work in this release.) | ||
* **16.x**: Enable deprecation warning for `componentWillMount`, `componentWillReceiveProps`, and `componentWillUpdate`. (Both the old lifecycle names and the new aliases will work in this release, but the old names will log a DEV-mode warning.) | ||
* **17.0**: Remove `componentWillMount`, `componentWillReceiveProps`, and `componentWillUpdate` . (Only the new "UNSAFE_" lifecycle names will work from this point forward.) | ||
|
||
In this post, we will explore some of the potential capabilities of async rendering, and we'll outline a migration plan for components that rely on these legacy lifecycles. | ||
Below, we will outline a migration plan for components that rely on these legacy lifecycles. | ||
|
||
## Updating class components | ||
|
||
#### 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 is to enable open source project maintainers to update their libraries in advance of any deprecation warnings. Those warnings will be enabled with a future 16.x release. | ||
#### 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. | ||
|
||
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 avoids the problematic lifecycles. | ||
|
||
|
@@ -35,9 +35,9 @@ Before we begin, here's a quick overview of the lifecycle changes planned for ve | |
|
||
`embed:update-on-async-rendering/new-lifecycles-overview.js` | ||
|
||
The new static `getSnapshotBeforeUpdate` lifecycle is invoked after a component is instantiated as well as when it receives new props. It should return an object to update `state`, or `null` to indicate that the new `props` do not require any `state` updates. | ||
The new static `getSnapshotBeforeUpdate` lifecycle is invoked after a component is instantiated as well as when it receives new props. It can return an object to update `state`, or `null` to indicate that the new `props` do not require any `state` updates. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Real stupid question: shouldn't this line be There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Yes, thanks! |
||
|
||
The new `getSnapshotBeforeUpdate` lifecycle gets called right before mutations are made (e.g. before the DOM is updated). The return value for this lifecycle will be passed as the third parameter to `componentDidUpdate`. | ||
The new `getSnapshotBeforeUpdate` lifecycle is called right before mutations are made (e.g. before the DOM is updated). The return value for this lifecycle will be passed as the third parameter to `componentDidUpdate`. | ||
|
||
We'll look at examples of how both of these lifecycles can be used below. | ||
|
||
|
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
"lessons"?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I proof read this several times 😭