Try React Suspense In 5 Minutes

swyx 2018-04-03

DISCLAIMER

I am just messing around with this on my own and have no affiliation with the React Team. I am just doing this to learn in public as well as potentially save other people time.

REALLY, DON’T TRY THIS ESPECIALLY IF YOU’RE A BEGINNER AND DEFINITELY DON’T USE THIS IN PRODUCTION

THIS IS JUST FOR FUN AND EDIFICATION

The Short Version

git clone https://github.com/sw-yx/tryasyncreact.git
cd tryasyncreact
yarn
npm start

Less Short Version

Start from an empty folder and…

yarn init -y
yarn add react@canary react-dom@canary simple-cache-provider async-react-future

async-react-future is the high level API library that I have published, it just includes community-sourced implementations of the functions and components demoed by Dan Abramov. You can check the source as well as read up on other info at my news-tracking repo, fresh-async-react.

Instead of Webpack we’re going to also use ParcelJS v1.7 to bundle and run our app so make sure your Parcel version is up to date (parcel -V). Parcel 1.7 does some autoinstall magic which we don’t want, so we’re going to write an npm script to disable that (this flag is undocumented and cost me some time). To save you the hassle, here’s the final package.json you should have:

{
  "name": "testasyncreact",
  "version": "1.0.0",
  "main": "index.js",
  "author": "sw-yx <myemail@gmail.com>",
  "license": "MIT",
  "scripts": {
    "start": "parcel index.html --no-cache --no-autoinstall"
  },
  "dependencies": {
    "async-react-future": "0.0.1",
    "react": "^16.4.0-alpha.0911da3",
    "react-dom": "^16.4.0-alpha.0911da3",
    "simple-cache-provider": "^0.3.0"
  }
}

Coolio. Now we follow the rest of the standard ParcelJS getting started workflow:

index.html:

<html>
<body>
  <div id="root"></div>
  <script src="./index.js"></script>
</body>
</html>

index.js:

import React, { Component, unstable_AsyncMode as AsyncMode } from "react";
import ReactDOM from "react-dom";
import { createFetcher, Placeholder } from "async-react-future";

const fetchdata = delay =>
  new Promise((res, rej) => {
    setTimeout(() => res([1, 2, 3]), delay); // simulate an API fetch
  });
const dataFetcher = createFetcher(fetchdata);

function DataComponent({ timeForAPItoResolve }) {
  const nums = dataFetcher.read(timeForAPItoResolve);
  return <div>{nums.map(num => <div key={num}>{num}</div>)}</div>;
}
class App extends Component {
  render() {
    return (
      <AsyncMode>
        <Placeholder delayMs={1000} fallback={<div>Loading....</div>}>
          <div>
            <h1>welcome to the async react future </h1>
            <DataComponent timeForAPItoResolve={2000} />
          </div>
        </Placeholder>
      </AsyncMode>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

and that’s about it! hit npm start and check out the snazzy async loading!

tryasyncreact

Try More Things

async-react-future exports more goodies which were all demoed in the JSConf Iceland talk. Here’s the full list:

createFetcher
Placeholder
Component.deferSetState
Loading

These are completely untested, use at your own risk. I will try to add usage examples to the README of async-react-future. You are of course welcome to write your own versions of these, as others have been doing. If you come up with something cool, come post it to fresh-async-react!

If you would like to learn more, check my slides and my React Suspense Cheat Sheet here. Enjoy!