React Suspense for people in a hurry
Submitted by Trivikram Kamat (@trivikram) on Monday, 15 October 2018
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
In this talk, I’ll be explaining how React Suspense API works and we’ll be going through a demo to understand the API
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.