Skip to content
React Conf 2018 Source Code for "Moving to Suspense" Demo
Branch: master
Clone or download
Latest commit 2364f1c Mar 1, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
before-suspense [ImgBot] Optimize images Feb 28, 2019
conf-talk-progress [ImgBot] Optimize images Feb 28, 2019
full-suspense [ImgBot] Optimize images Feb 28, 2019
.gitignore Add full suspense Oct 29, 2018
LICENSE Create LICENSE Oct 29, 2018
MovingToReactSuspense.key Fix full suspense Oct 29, 2018 Update Oct 30, 2018

Moving to React Suspense

By Jared Palmer at React Conf 2018.

This is the source code to the application I demo'd at React Conf 2018. It is a small slice of Spotify called Suspensify. It's built with create react app, reach router, and good ol' setState.

It's separated into 3 folders:

  • before-suspense is the initial state of the application.
  • conf-talk-progress is where we end up--the final state of my talk--so you can follow along.
  • after-suspsense is a version where every single thing that can be moved to suspense, has been moved to suspense. I did not get this far in my talk, but it's there for completeness / reference.

Running locally

cd conf-talk-progress
yarn start

Note the Ken Wheeler and Wale routes do not work. I didn't bother making fake data for them. Sorry. Only the Drake and Big Sean routes work (first 2 results).

In the patches directory, there is a patched version of CRA's config/webpackDevServer.config.js that adds a little express middleware that will delay the high-res images from loading for demo purposes. It sniffs any requests including with -hd.jpeg and waits for the value of delay query parameter. The <Debugger /> request latency slider is used to set this query parameter's value for all images.

What's it look like?

kapture 2018-10-29 at 15 50 42

You can’t perform that action at this time.