943: Modern React with Ricky Hanlon (React Core Dev)

Episode Summary

Executive Summary: Ricky Hanlon, a core React engineer, explains how modern React features like transitions, deferred values, Suspense, optimistic updates, and preloading are really about scheduling, perceived performance, and better UX—not just rendering speed. The discussion focuses on pushing these capabilities into routers, data fetching, and design systems so apps feel responsive by default, while also covering React’s canary rollout model, server components lessons, and future work like concurrent stores.

Main Topics: Transitions as scheduling and prioritization: Ricky frames React transitions as a way to preserve immediate user feedback while deferring expensive or lower-priority UI updates, similar to background work in native apps. Deferred values and Suspense behavior: He distinguishes transition-time deferral from read-time deferral, and emphasizes Suspense’s batching/throttling behavior as a key performance and UX tool. Optimistic UI and user feedback: The conversation explains useOptimistic as a mechanism for instant temporary UI state, especially for actions like likes, before server confirmation arrives. Data fetching, preloading, and hover-based anticipation: Ricky recommends fetching as early as possible, often on hover, and using Suspense or data libraries to preload promises and avoid jarring loading states. Framework-level adoption in router, data layer, and design components: A major theme is that modern React patterns should be built into infrastructure layers so product code stays declarative and simpler. React’s public rollout, docs, and server components lessons: He discusses the canary release process, communication challenges, and what the server components rollout taught the team about feedback, messaging, and ecosystem adoption. Future directions: concurrent stores and scheduling across UI layers: The episode touches on ongoing work around concurrent store APIs and broader scheduling support, plus why React’s architecture aims to benefit any UI library style app.

Key Arguments: Transitions are fundamentally scheduling tools: React’s goal is to prioritize user input immediately while deferring the result of that work so the UI stays responsive. Perceived performance matters as much as raw performance; showing feedback quickly is often more important than completing the final data/render result immediately. Suspense’s batching/throttling can improve both UX and performance by reducing flicker and combining multiple updates into one commit/animation. useDeferredValue is best understood as deferring at the read point, while transitions defer at the write point, making each appropriate for different layers of the app. useOptimistic supports instant feedback patterns such as likes or pending actions, reducing the sense of latency. Modern React features should ideally be implemented in routers, data-fetching layers, and design systems so app code stays simple and declarative. Preloading on hover or early in navigation can hide latency and prevent Suspense from ever appearing in many cases. The React team’s canary process is meant to improve ecosystem feedback, but it can create confusion when experimental features look more finished than they are. Server components were not built only for Next.js; they were iterated on with multiple partners and frameworks, including Hydrogen and Vite integrations. Docs matter enormously, but poor docs can be worse than none; the team is balancing documentation, shipping, and communication.

Data Points: Fallback throttle duration: 300 milliseconds - Ricky says React Suspense intentionally keeps a fallback visible for at least 300ms to avoid flicker and improve perceived performance. Perceived acceptable skeleton/loading duration: Up to about 500 milliseconds - He says users tend to blame this range on the network rather than the app, so a fallback can remain visible without feeling like app jank. Delays that feel too fast to perceive: Around 20–30 milliseconds - He notes that flickers in this range are too brief for users to register, often making the UI feel worse rather than better. Animation sequence example: 3 sequential 200ms animations = 600ms total - Used to explain why batching updates into one animation can be faster and smoother than animating each update separately. Batched alternative example: 300ms fallback + 200ms animation = 500ms total - Illustrates how waiting slightly longer to batch work can reduce total perceived time. Hover-to-click lead time: 100–200 milliseconds - He suggests prefetching on hover can often complete requests before mouse down, hiding latency.

Pivotal Quotes: "You can think of a transition as a UI transition. Fundamentally, it's kind of like you can think of it as a Maybe a little bit like a transaction or like a background thread." — Ricky Hanlon: Explaining the core mental model for React transitions and why they exist. "The thing I really am trying to help people appreciate about suspense right now is the batching behavior." — Ricky Hanlon: Describing what he sees as the most underappreciated benefit of Suspense. "Shipping solves problems." — Ricky Hanlon: Discussing why the team often prefers to deliver working features rather than over-communicate unfinished ideas.

Implications: React’s future pushes complexity into framework layers, making apps feel faster and simpler by default. For developers, the big shift is thinking in UX timing, not just rendering, and adopting Suspense/transition patterns through routers and data layers.