React Suspense for people in a hurry

Submitted Oct 16, 2018

Technical level: Intermediate

Since Ajax became popular, developers have been using it to improve the perceived latencies by showing a placeholder loading animation while the data is fetched in the background. It is a good solution, which allows non-critical resources to be loaded later. Developers continued to used this approach with newer JavaScript frameworks like Angular, React, VueJS etc

A side effect of this is that as the project goes big different components of the page are owned by different teams, and several loading animations might appear on the page - each one fetching data for itself. This is not a good user experience. One fix for this is to show single loading animation per page, but that needs waiting for data for all components to be fetched before showing the page content, which is also not a good experience.

React tries to fix this problem using Async rendering with Suspense API, which:

starts rendering even before the data has loaded
pauses any component until the data is ready
On a fast network, delays DOM mutations until the entire tree is complete
On a slow network, allows the developer to precisely control loading states

Outline

In this talk, I’ll be explaining how React Suspense API works and we’ll be going through a demo to understand the API

Speaker bio

Trivikram Kamat is a Software Development Engineer based out of Seattle area
He’s active in Open Source Community for over a year now, and is a NodeJS collaborator. He’s one of the maintainers of confs.tech website which is built using Create React App, and has worked with React versions 0.14.x, 15.x and 16.x over last three years.

JSFoo: round the year submissions