From 1995cec42251ef4c422e314e65dbba33bc9b00b7 Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Wed, 7 Feb 2018 08:05:27 -0800 Subject: [PATCH] Wordsmithing --- content/blog/2018-02-07-update-on-async-rendering.md | 2 +- .../update-on-async-rendering/initializing-state-after.js | 4 ++-- .../update-on-async-rendering/initializing-state-before.js | 6 +++--- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/content/blog/2018-02-07-update-on-async-rendering.md b/content/blog/2018-02-07-update-on-async-rendering.md index 7ae13831df6..fcc73675c41 100644 --- a/content/blog/2018-02-07-update-on-async-rendering.md +++ b/content/blog/2018-02-07-update-on-async-rendering.md @@ -27,7 +27,7 @@ We have been fine-tuning the performance of React with every new release. Howeve We found that asynchronous rendering can help in several ways. For example: -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. +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. React could keep the old UI "alive" and interactive for a certain period while the updated UI is not ready yet, and provide a declarative way to show a loading indicator if it takes more than a second. 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. 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.) 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)). diff --git a/examples/update-on-async-rendering/initializing-state-after.js b/examples/update-on-async-rendering/initializing-state-after.js index 8bea2886fe3..72fe66caef9 100644 --- a/examples/update-on-async-rendering/initializing-state-after.js +++ b/examples/update-on-async-rendering/initializing-state-after.js @@ -2,7 +2,7 @@ class ExampleComponent extends React.Component { // highlight-range{1-4} state = { - isScrollingDown: false, - lastRow: this.props.currentRow, + currentColor: this.props.defaultColor, + palette: 'rgb' }; } diff --git a/examples/update-on-async-rendering/initializing-state-before.js b/examples/update-on-async-rendering/initializing-state-before.js index 9dd5c009d0b..92e37349aa2 100644 --- a/examples/update-on-async-rendering/initializing-state-before.js +++ b/examples/update-on-async-rendering/initializing-state-before.js @@ -5,8 +5,8 @@ class ExampleComponent extends React.Component { // highlight-range{1-6} componentWillMount() { this.setState({ - isScrollingDown: false, - lastRow: this.props.currentRow, + currentColor: this.props.defaultColor, + palette: 'rgb' }); } -} +} \ No newline at end of file