Go to the profile of Joanne
Joanne
technical debt creator @ www.zapier.com

Notes from Dan Abramov’s Beyond React 16 Talk

JSConf Iceland 2018

Meanwhile in Iceland… Dan is importing from the future.
With vast differences in computing power and network speed, how do we deliver the best user experience?
In the context of React, here are the 2 areas that can be improved.

Currently, React makes updates synchronously. Once React starts rendering, it can’t stop.

What if React can make updates asynchronously so that once it start rendering, it can yield back to the browser. For example, if there’s a higher priority event like an input, the browser can handle that first and not block the thread.

In async mode, the user can still interact with the app while the it’s mounting.

Git metaphor
React will handle the “rebasing” part — determine how to apply a low-priority update onto the top.
import { createFetcher, Placeholder, Loading } from '../future';
createFetcher API from the future where we will pass in a promise-returning function.

The fetcher object will work as a cache and has a read method. It will get data from the cache first.

deferSetState tells React it’s ok for the transition to be async.
With the Placeholder component, if anything takes more than a 1500ms to load while waiting for async dependencies, React will show the spinner.

The app will be fully interactive while the data is fetching, and there are no race conditions when we click around the app, triggering different fetches.

We can show everything together or we can selectively choose which components we want to show first. In this example, if the movie review took more than a second to load, we’ll show a spinner.
Loading is a component that gives you a render prop called isLoading that lets us decide what to show.

Code Splitting FTW!

Code splitting using the createFetcher API and passing a function that returns a dynamic import. To get the component, call the .read().default method from the fetcher.
To prevent the page from jumping around when an image loads, we can avoid showing the page until the image is ready by using the createFetcher API.
Git metaphor
You can still click on everything and interact with the app.

Awesome demos Dan! I can’t wait to try these new features out!