{"action":"created","comment":{"url":"https://api.github.com/repos/reactjs/reactjs.org/pulls/comments/166482342","pull_request_review_id":94546824,"id":166482342,"diff_hunk":"@@ -0,0 +1,123 @@\n+---\n+title: Update on Async Rendering\n+author: [bvaughn, gaearon]\n+---\n+\n+For the past few months, the React team has been experimenting with [asynchronous rendering](/blog/2017/09/26/react-v16.0.html#new-core-architecture), and we are very excited about the new features it enables.\n+\n+Along the way our research has shown that some of our legacy component lifecycles tend to encourage unsafe coding practices. They are:\n+\n+* `componentWillMount`\n+* `componentWillReceiveProps`\n+* `componentWillUpdate`\n+\n+Because of this, we have decided to rename these lifecycles—(adding an \"UNSAFE_\" prefix)—in a future release. The plan for this is as follows:\n+\n+* **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.)\n+* **16.4**: Enable deprecation warning for `componentWillMount`, `componentWillReceiveProps`, and `componentWillUpdate`. (Both the old lifecycle names and the new aliases will work in this release.)\n+* **17.0**: Remove `componentWillMount`, `componentWillReceiveProps`, and `componentWillUpdate` . (Only the new \"UNSAFE_\" lifecycle names will work in this release.)\n+\n+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 the deprecated lifecycles.\n+\n+## What can Asynchronous Rendering do?\n+\n+#### With every new version, our goal is to improve the user experience of apps created with React.\n+\n+We have been fine-tuning the performance of React with every new release. However, despite what synthetic benchmarks say, we've found that the real bottleneck is generally not React itself, but the application code using it. In order to unlock the next wave of performance optimizations and new features, we need React to be smarter about when to re-render components and flush updates to the screen.\n+\n+We found that asynchronous rendering can help in several ways. For example:\n+\n+1. As users navigate within an app, newly displayed components often have asynchronous dependencies (including data, images, and code splitting). This leads to a lot of boilerplate code managing data fetching and displaying the loading states. It can also lead to a “cascade of spinners” as the data loads, causing DOM reflows and janky user experience. We'd like to make it easier for product developers to express asynchronous dependencies of components- keeping the old UI \"alive\" for a certain period while the new UI is not \"ready\" yet. React could render this new UI in the background and provide a declarative way to show a loading indicator if it takes more than a second.\n+2. Fast updates within a short timeframe often cause jank because React processes each update individually. We'd like to automatically \"combine\" updates within a few hundred milliseconds when possible so that there is less re-rendering.\n+3. Some updates are inherently less important than others. For example, if you're writing a live-updating search filter input like [this](https://zeit.co/blog/domains-search-web#asynchronous-rendering), it is essential that the input is updated immediately (within a few milliseconds). Re-rendering the result list can be done later, and should not block the thread or cause stutter when typing. It would be nice if React had a way to mark the latter updates as having a lower priority. (Note that even debouncing the input doesn't help because if the rendering is synchronous—like in React today—a keystroke can't interrupt the rendering if it already started. Asynchronous rendering solves this by splitting rendering into small chunks that can be paused and later restarted.)\n+4. For UI elements like hidden popups and tabs, we'd like to be able to start pre-rendering their content when the browser isn't busy. This way, they can appear instantaneously in response to a later user interaction. However, we don't want to make the initial rendering slower, so it's essential to render such elements lazily ([when the browser is idle](https://developers.google.com/web/updates/2015/08/using-requestidlecallback)).\n+5. For many apps, React is not the only JavaScript on the page. It often has to coordinate with other JS libraries, server-rendered widgets, and so on. Asynchronous rendering lets React better coordinate with non-React code regarding when components are inserted into the DOM so that [the user experience is smooth](https://twitter.com/acdlite/status/909926793536094209).\n+\n+Of course, it's possible to implement some of these features today, but it's difficult. We hope to make them effortless by building them into React itself. By replacing problematic lifecycles with safer alternatives, we also hope to make it simple to write async-safe React components.\n+\n+In the next section, we'll look at how to update your existing components to prepare for the upcoming lifecycle changes.\n+\n+## Updating class components\n+\n+#### 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.\n+\n+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.","path":"content/blog/2018-02-07-update-on-async-rendering.md","position":44,"original_position":44,"commit_id":"8bc2a14f198d7e478b9b0de20d8046ff70ebd124","original_commit_id":"8bc2a14f198d7e478b9b0de20d8046ff70ebd124","user":{"login":"gaearon","id":810438,"avatar_url":"https://avatars0.githubusercontent.com/u/810438?v=4","gravatar_id":"","url":"https://api.github.com/users/gaearon","html_url":"https://github.com/gaearon","followers_url":"https://api.github.com/users/gaearon/followers","following_url":"https://api.github.com/users/gaearon/following{/other_user}","gists_url":"https://api.github.com/users/gaearon/gists{/gist_id}","starred_url":"https://api.github.com/users/gaearon/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/gaearon/subscriptions","organizations_url":"https://api.github.com/users/gaearon/orgs","repos_url":"https://api.github.com/users/gaearon/repos","events_url":"https://api.github.com/users/gaearon/events{/privacy}","received_events_url":"https://api.github.com/users/gaearon/received_events","type":"User","site_admin":false},"body":"\"new component API\" sounds like we overhauled the whole component API","created_at":"2018-02-07T00:03:25Z","updated_at":"2018-02-07T00:38:21Z","html_url":"https://github.com/reactjs/reactjs.org/pull/596#discussion_r166482342","pull_request_url":"https://api.github.com/repos/reactjs/reactjs.org/pulls/596","author_association":"OWNER","_links":{"self":{"href":"https://api.github.com/repos/reactjs/reactjs.org/pulls/comments/166482342"},"html":{"href":"https://github.com/reactjs/reactjs.org/pull/596#discussion_r166482342"},"pull_request":{"href":"https://api.github.com/repos/reactjs/reactjs.org/pulls/596"}}},"pull_request":{"url":"https://api.github.com/repos/reactjs/reactjs.org/pulls/596","id":167533913,"html_url":"https://github.com/reactjs/reactjs.org/pull/596","diff_url":"https://github.com/reactjs/reactjs.org/pull/596.diff","patch_url":"https://github.com/reactjs/reactjs.org/pull/596.patch","issue_url":"https://api.github.com/repos/reactjs/reactjs.org/issues/596","number":596,"state":"open","locked":false,"title":"An update on async rendering","user":{"login":"bvaughn","id":29597,"avatar_url":"https://avatars0.githubusercontent.com/u/29597?v=4","gravatar_id":"","url":"https://api.github.com/users/bvaughn","html_url":"https://github.com/bvaughn","followers_url":"https://api.github.com/users/bvaughn/followers","following_url":"https://api.github.com/users/bvaughn/following{/other_user}","gists_url":"https://api.github.com/users/bvaughn/gists{/gist_id}","starred_url":"https://api.github.com/users/bvaughn/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/bvaughn/subscriptions","organizations_url":"https://api.github.com/users/bvaughn/orgs","repos_url":"https://api.github.com/users/bvaughn/repos","events_url":"https://api.github.com/users/bvaughn/events{/privacy}","received_events_url":"https://api.github.com/users/bvaughn/received_events","type":"User","site_admin":false},"body":"Work in progress...\r\n\r\n[Formatted \"update on async rendering\"](https://deploy-preview-596--reactjs.netlify.com/blog/2018/02/07/update-on-async-rendering.html)\r\n\r\n[Formatted \"strict mode\"](https://deploy-preview-596--reactjs.netlify.com/blog/2018/02/07/strict-mode.html)\r\n\r\n### TODO\r\n- [ ] Finalize content and respond to team feedback\r\n- [ ] Should the \"Strict Mode\" blog post be a Docs page instead?\r\n- [ ] Change name of file (date) to match release date.\r\n- [ ] Add working link to `createRef` API docs (once @trueadm creates it)\r\n- [ ] Merge into PR #587 (since there's a shared `createRef` example dependency, and both need to be released at the same time anyway.)","created_at":"2018-02-06T21:28:24Z","updated_at":"2018-02-07T00:38:22Z","closed_at":null,"merged_at":null,"merge_commit_sha":"f55fc45bf3d2a5c348266ab788d7348b7b03c0f7","assignee":null,"assignees":[],"requested_reviewers":[],"requested_teams":[],"milestone":null,"commits_url":"https://api.github.com/repos/reactjs/reactjs.org/pulls/596/commits","review_comments_url":"https://api.github.com/repos/reactjs/reactjs.org/pulls/596/comments","review_comment_url":"https://api.github.com/repos/reactjs/reactjs.org/pulls/comments{/number}","comments_url":"https://api.github.com/repos/reactjs/reactjs.org/issues/596/comments","statuses_url":"https://api.github.com/repos/reactjs/reactjs.org/statuses/8bc2a14f198d7e478b9b0de20d8046ff70ebd124","head":{"label":"bvaughn:update-on-async-rendering","ref":"update-on-async-rendering","sha":"8bc2a14f198d7e478b9b0de20d8046ff70ebd124","user":{"login":"bvaughn","id":29597,"avatar_url":"https://avatars0.githubusercontent.com/u/29597?v=4","gravatar_id":"","url":"https://api.github.com/users/bvaughn","html_url":"https://github.com/bvaughn","followers_url":"https://api.github.com/users/bvaughn/followers","following_url":"https://api.github.com/users/bvaughn/following{/other_user}","gists_url":"https://api.github.com/users/bvaughn/gists{/gist_id}","starred_url":"https://api.github.com/users/bvaughn/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/bvaughn/subscriptions","organizations_url":"https://api.github.com/users/bvaughn/orgs","repos_url":"https://api.github.com/users/bvaughn/repos","events_url":"https://api.github.com/users/bvaughn/events{/privacy}","received_events_url":"https://api.github.com/users/bvaughn/received_events","type":"User","site_admin":false},"repo":{"id":106025325,"name":"reactjs.org","full_name":"bvaughn/reactjs.org","owner":{"login":"bvaughn","id":29597,"avatar_url":"https://avatars0.githubusercontent.com/u/29597?v=4","gravatar_id":"","url":"https://api.github.com/users/bvaughn","html_url":"https://github.com/bvaughn","followers_url":"https://api.github.com/users/bvaughn/followers","following_url":"https://api.github.com/users/bvaughn/following{/other_user}","gists_url":"https://api.github.com/users/bvaughn/gists{/gist_id}","starred_url":"https://api.github.com/users/bvaughn/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/bvaughn/subscriptions","organizations_url":"https://api.github.com/users/bvaughn/orgs","repos_url":"https://api.github.com/users/bvaughn/repos","events_url":"https://api.github.com/users/bvaughn/events{/privacy}","received_events_url":"https://api.github.com/users/bvaughn/received_events","type":"User","site_admin":false},"private":false,"html_url":"https://github.com/bvaughn/reactjs.org","description":"Source code and documentation powering reactjs.org","fork":true,"url":"https://api.github.com/repos/bvaughn/reactjs.org","forks_url":"https://api.github.com/repos/bvaughn/reactjs.org/forks","keys_url":"https://api.github.com/repos/bvaughn/reactjs.org/keys{/key_id}","collaborators_url":"https://api.github.com/repos/bvaughn/reactjs.org/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/bvaughn/reactjs.org/teams","hooks_url":"https://api.github.com/repos/bvaughn/reactjs.org/hooks","issue_events_url":"https://api.github.com/repos/bvaughn/reactjs.org/issues/events{/number}","events_url":"https://api.github.com/repos/bvaughn/reactjs.org/events","assignees_url":"https://api.github.com/repos/bvaughn/reactjs.org/assignees{/user}","branches_url":"https://api.github.com/repos/bvaughn/reactjs.org/branches{/branch}","tags_url":"https://api.github.com/repos/bvaughn/reactjs.org/tags","blobs_url":"https://api.github.com/repos/bvaughn/reactjs.org/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/bvaughn/reactjs.org/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/bvaughn/reactjs.org/git/refs{/sha}","trees_url":"https://api.github.com/repos/bvaughn/reactjs.org/git/trees{/sha}","statuses_url":"https://api.github.com/repos/bvaughn/reactjs.org/statuses/{sha}","languages_url":"https://api.github.com/repos/bvaughn/reactjs.org/languages","stargazers_url":"https://api.github.com/repos/bvaughn/reactjs.org/stargazers","contributors_url":"https://api.github.com/repos/bvaughn/reactjs.org/contributors","subscribers_url":"https://api.github.com/repos/bvaughn/reactjs.org/subscribers","subscription_url":"https://api.github.com/repos/bvaughn/reactjs.org/subscription","commits_url":"https://api.github.com/repos/bvaughn/reactjs.org/commits{/sha}","git_commits_url":"https://api.github.com/repos/bvaughn/reactjs.org/git/commits{/sha}","comments_url":"https://api.github.com/repos/bvaughn/reactjs.org/comments{/number}","issue_comment_url":"https://api.github.com/repos/bvaughn/reactjs.org/issues/comments{/number}","contents_url":"https://api.github.com/repos/bvaughn/reactjs.org/contents/{+path}","compare_url":"https://api.github.com/repos/bvaughn/reactjs.org/compare/{base}...{head}","merges_url":"https://api.github.com/repos/bvaughn/reactjs.org/merges","archive_url":"https://api.github.com/repos/bvaughn/reactjs.org/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/bvaughn/reactjs.org/downloads","issues_url":"https://api.github.com/repos/bvaughn/reactjs.org/issues{/number}","pulls_url":"https://api.github.com/repos/bvaughn/reactjs.org/pulls{/number}","milestones_url":"https://api.github.com/repos/bvaughn/reactjs.org/milestones{/number}","notifications_url":"https://api.github.com/repos/bvaughn/reactjs.org/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/bvaughn/reactjs.org/labels{/name}","releases_url":"https://api.github.com/repos/bvaughn/reactjs.org/releases{/id}","deployments_url":"https://api.github.com/repos/bvaughn/reactjs.org/deployments","created_at":"2017-10-06T16:15:47Z","updated_at":"2017-10-06T16:15:49Z","pushed_at":"2018-02-06T22:58:22Z","git_url":"git://github.com/bvaughn/reactjs.org.git","ssh_url":"git@github.com:bvaughn/reactjs.org.git","clone_url":"https://github.com/bvaughn/reactjs.org.git","svn_url":"https://github.com/bvaughn/reactjs.org","homepage":"https://reactjs.org/","size":65959,"stargazers_count":0,"watchers_count":0,"language":"JavaScript","has_issues":false,"has_projects":true,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":0,"mirror_url":null,"archived":false,"open_issues_count":0,"license":null,"forks":0,"open_issues":0,"watchers":0,"default_branch":"master"}},"base":{"label":"reactjs:master","ref":"master","sha":"3bf8b907bd2d4294c929ec9989b3a470d8b3b880","user":{"login":"reactjs","id":6412038,"avatar_url":"https://avatars3.githubusercontent.com/u/6412038?v=4","gravatar_id":"","url":"https://api.github.com/users/reactjs","html_url":"https://github.com/reactjs","followers_url":"https://api.github.com/users/reactjs/followers","following_url":"https://api.github.com/users/reactjs/following{/other_user}","gists_url":"https://api.github.com/users/reactjs/gists{/gist_id}","starred_url":"https://api.github.com/users/reactjs/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/reactjs/subscriptions","organizations_url":"https://api.github.com/users/reactjs/orgs","repos_url":"https://api.github.com/users/reactjs/repos","events_url":"https://api.github.com/users/reactjs/events{/privacy}","received_events_url":"https://api.github.com/users/reactjs/received_events","type":"Organization","site_admin":false},"repo":{"id":105963253,"name":"reactjs.org","full_name":"reactjs/reactjs.org","owner":{"login":"reactjs","id":6412038,"avatar_url":"https://avatars3.githubusercontent.com/u/6412038?v=4","gravatar_id":"","url":"https://api.github.com/users/reactjs","html_url":"https://github.com/reactjs","followers_url":"https://api.github.com/users/reactjs/followers","following_url":"https://api.github.com/users/reactjs/following{/other_user}","gists_url":"https://api.github.com/users/reactjs/gists{/gist_id}","starred_url":"https://api.github.com/users/reactjs/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/reactjs/subscriptions","organizations_url":"https://api.github.com/users/reactjs/orgs","repos_url":"https://api.github.com/users/reactjs/repos","events_url":"https://api.github.com/users/reactjs/events{/privacy}","received_events_url":"https://api.github.com/users/reactjs/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/reactjs/reactjs.org","description":"The React documentation website","fork":false,"url":"https://api.github.com/repos/reactjs/reactjs.org","forks_url":"https://api.github.com/repos/reactjs/reactjs.org/forks","keys_url":"https://api.github.com/repos/reactjs/reactjs.org/keys{/key_id}","collaborators_url":"https://api.github.com/repos/reactjs/reactjs.org/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/reactjs/reactjs.org/teams","hooks_url":"https://api.github.com/repos/reactjs/reactjs.org/hooks","issue_events_url":"https://api.github.com/repos/reactjs/reactjs.org/issues/events{/number}","events_url":"https://api.github.com/repos/reactjs/reactjs.org/events","assignees_url":"https://api.github.com/repos/reactjs/reactjs.org/assignees{/user}","branches_url":"https://api.github.com/repos/reactjs/reactjs.org/branches{/branch}","tags_url":"https://api.github.com/repos/reactjs/reactjs.org/tags","blobs_url":"https://api.github.com/repos/reactjs/reactjs.org/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/reactjs/reactjs.org/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/reactjs/reactjs.org/git/refs{/sha}","trees_url":"https://api.github.com/repos/reactjs/reactjs.org/git/trees{/sha}","statuses_url":"https://api.github.com/repos/reactjs/reactjs.org/statuses/{sha}","languages_url":"https://api.github.com/repos/reactjs/reactjs.org/languages","stargazers_url":"https://api.github.com/repos/reactjs/reactjs.org/stargazers","contributors_url":"https://api.github.com/repos/reactjs/reactjs.org/contributors","subscribers_url":"https://api.github.com/repos/reactjs/reactjs.org/subscribers","subscription_url":"https://api.github.com/repos/reactjs/reactjs.org/subscription","commits_url":"https://api.github.com/repos/reactjs/reactjs.org/commits{/sha}","git_commits_url":"https://api.github.com/repos/reactjs/reactjs.org/git/commits{/sha}","comments_url":"https://api.github.com/repos/reactjs/reactjs.org/comments{/number}","issue_comment_url":"https://api.github.com/repos/reactjs/reactjs.org/issues/comments{/number}","contents_url":"https://api.github.com/repos/reactjs/reactjs.org/contents/{+path}","compare_url":"https://api.github.com/repos/reactjs/reactjs.org/compare/{base}...{head}","merges_url":"https://api.github.com/repos/reactjs/reactjs.org/merges","archive_url":"https://api.github.com/repos/reactjs/reactjs.org/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/reactjs/reactjs.org/downloads","issues_url":"https://api.github.com/repos/reactjs/reactjs.org/issues{/number}","pulls_url":"https://api.github.com/repos/reactjs/reactjs.org/pulls{/number}","milestones_url":"https://api.github.com/repos/reactjs/reactjs.org/milestones{/number}","notifications_url":"https://api.github.com/repos/reactjs/reactjs.org/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/reactjs/reactjs.org/labels{/name}","releases_url":"https://api.github.com/repos/reactjs/reactjs.org/releases{/id}","deployments_url":"https://api.github.com/repos/reactjs/reactjs.org/deployments","created_at":"2017-10-06T03:16:04Z","updated_at":"2018-02-06T09:15:17Z","pushed_at":"2018-02-07T00:00:04Z","git_url":"git://github.com/reactjs/reactjs.org.git","ssh_url":"git@github.com:reactjs/reactjs.org.git","clone_url":"https://github.com/reactjs/reactjs.org.git","svn_url":"https://github.com/reactjs/reactjs.org","homepage":"https://reactjs.org/","size":65875,"stargazers_count":1122,"watchers_count":1122,"language":"JavaScript","has_issues":true,"has_projects":true,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":686,"mirror_url":null,"archived":false,"open_issues_count":110,"license":{"key":"cc-by-4.0","name":"Creative Commons Attribution 4.0","spdx_id":"CC-BY-4.0","url":"https://api.github.com/licenses/cc-by-4.0"},"forks":686,"open_issues":110,"watchers":1122,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/reactjs/reactjs.org/pulls/596"},"html":{"href":"https://github.com/reactjs/reactjs.org/pull/596"},"issue":{"href":"https://api.github.com/repos/reactjs/reactjs.org/issues/596"},"comments":{"href":"https://api.github.com/repos/reactjs/reactjs.org/issues/596/comments"},"review_comments":{"href":"https://api.github.com/repos/reactjs/reactjs.org/pulls/596/comments"},"review_comment":{"href":"https://api.github.com/repos/reactjs/reactjs.org/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/reactjs/reactjs.org/pulls/596/commits"},"statuses":{"href":"https://api.github.com/repos/reactjs/reactjs.org/statuses/8bc2a14f198d7e478b9b0de20d8046ff70ebd124"}},"author_association":"CONTRIBUTOR"}}
{"actor":{"display_login":"gaearon"}}