# Try React Suspense In 5 Minutes Original: https://swyx.io/how-to-try-react-suspense-in-5-minutes-474c Published: 2018-04-03 > title: Try React Suspense In 5 Minutes --- title: Try React Suspense In 5 Minutes published: true description: a quick guide to setting up an Async React sandbox using Parcel 1.7.0 tags: react suspense, react, parcel, parceljs --- # 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... ```bash 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](https://github.com/sw-yx/async-react-future) as well as read up on other info at my news-tracking repo, [fresh-async-react](https://github.com/sw-yx/fresh-async-react/). Instead of Webpack we're going to also use [ParcelJS v1.7](https://medium.com/@devongovett/parcel-v1-7-0-9aac0c505837) 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 ", "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](https://parceljs.org/getting_started.html) workflow: `index.html`: ```html

``` --- `index.js`: ```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

{nums.map(num =>

{num}

)}

; } class App extends Component { render() { return ( Loading....}>

welcome to the async react future

); } } ReactDOM.render(, document.getElementById("root")); ``` and that's about it! hit `npm start` and check out the snazzy async loading! ![tryasyncreact](https://user-images.githubusercontent.com/6764957/38276875-710bfb48-3764-11e8-8324-7f51d660080b.gif) # Try More Things `async-react-future` exports more goodies which were all demoed in the [JSConf Iceland talk](https://www.youtube.com/watch?v=v6iR3Zk4oDY). 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](https://github.com/sw-yx/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`!](https://github.com/sw-yx/fresh-async-react) If you would like to learn more, [check my slides and my React Suspense Cheat Sheet here](https://twitter.com/swyx/status/978880884031066112). Enjoy!