Hasty Treat - React Suspense

Episode Summary

Executive Summary: The episode previews React’s roadmap, focusing on how Suspense, concurrent mode, and lazy loading aim to simplify data fetching and code splitting while improving perceived performance. The hosts explain the current pain points of loading states and data management, and why React’s upcoming APIs could make apps faster, smoother, and easier to build, while noting the APIs are still evolving.

Main Topics: React roadmap and future direction: The hosts discuss a React roadmap post by Dan Abramov and outline the upcoming sequence of features: code-splitting Suspense, concurrent mode, and Suspense for data fetching. Suspense for data fetching: They explain the core Suspense idea: transform async data functions into resources, read them during render, and let Suspense boundaries handle loading states instead of manual loading booleans. Loading UI and perceived performance: The episode emphasizes fallback UIs, optional delay before showing loaders, and reducing flicker on fast connections to improve the user’s perception of speed. Cache and preload integration: They describe how resources can read from caches and be preloaded in advance, with potential integration from libraries like Apollo and Relay. Suspense for code splitting: The hosts cover the already-shipped lazy loading API using react.lazy and Suspense, noting its benefits and current limitations with server-side rendering. Concurrent mode as a prerequisite: Concurrent mode (formerly async mode) is presented as a necessary React capability for non-blocking rendering and a foundation for later Suspense features. Developer experience and ecosystem impact: They argue React’s goal is to make hard problems like data fetching and code splitting easy, encouraging broader adoption and better app performance across the ecosystem.

Key Arguments: Suspense is meant to remove manual loading state management by letting components read resources synchronously during render, while the boundary handles what to show during fetches. React’s upcoming features are designed to improve both developer ergonomics and user experience by making apps load faster and feel smoother. Code splitting should be effortless through react.lazy and Suspense, encouraging developers to split bundles without complex boilerplate. A small delay before showing loaders reduces UI flicker on fast connections and avoids unnecessary visual disruption. Caching and preloading will likely become more tightly integrated with React, allowing libraries like Apollo and Relay to plug into the same rendering model. Concurrent mode is a foundational step that enables the non-blocking behavior Suspense relies on. The APIs are still in flux, so the exact syntax and behavior may change before broader release.

Data Points: React 16 roadmap reference: November 27 - The hosts reference Dan Abramov’s React 16 roadmap blog post published on November 27. Suspense for code splitting release: Already shipped in React 16.6 - They note that Suspense for code splitting has already launched, though with caveats. Concurrent mode timing: Q2 2019 - The roadmap mentioned concurrent mode as expected in Q2 2019. Suspense for data fetching timing: Mid-2019 - The roadmap positioned Suspense for data fetching for mid-2019. Loader delay example: 500 milliseconds - They describe a max delay of 500 ms to avoid flashing loaders on fast connections. Cache package status: No docs yet - They mention the React cache package exists but has no documentation at the time of recording.

Pivotal Quotes: "it really gives you a big insight into what the team is thinking and where it is going" — Scott Tolinsky: Describing the value of the React roadmap post "what you want to do is You take your data fetching functions... You turn those functions into what are called resources" — Scott Tolinsky: Explaining the resource-based model for Suspense data fetching "if code splitting is easy, if it's painless, if it's the way to do things, then everyone's going to code split and your site's going to load fast" — Wes Bos: Why React is making code splitting simpler

Implications: Listeners should expect React to move toward simpler data loading, better perceived performance, and more automatic code splitting. The ecosystem will likely adopt Suspense-aware caching and fetching patterns, changing how apps are structured and loaded.