Big Suspense Changes in React 19: Explained In Code

What seems like a minor change to suspenses in React 19 is getting major pushback because of the impact it has on the way we load data into Single Page Applications.

👉 VS Code theme and font? Night Wolf [black] and Operator Mono
👉 Terminal Theme and font? oh-my-posh with powerlevel10k_rainbow and SpaceMono NF

00:00 Introduction
02:20 Suspenses In React 18
06:28 Upgrading to React 19
07:42 Using the Use Hook
09:03 Hoisting Your Fetches
10:36 Users And Orders Starter
11:42 Creating A Waterfall
13:01 Maybe Composition?
13:43 Let's Go Hoisting
14:15 Will Prefetch Work Instead?
15:21 How React Query Fits In
16:21 Outroduction

[codeChuck]

Thank you, Jack! This explanation about double suspense in parallel clarified my concerns! 😊

[mikekidder]

Keep us in the weeds Jack. This is great stuff. Looks like I'll be getting into React development more, and these videos are really helpful and concise.

[consoledoterror]

Once again. Thanks for the awesome content Jack.

[mubin-ansari]

Pushback on this definitely seems valid. RSC was sold as "each component can manage it's own fetching and data logic". This change now wants us to move back the data fetching logic in the parent component and keep the component just JSX only. Bad move.

[KonstantinosLeimonis]

I've read a few blog posts to understand the problem, but this video explanation with the live examples is absolutely great and straight to the point. Great stuff, and thank you for this great explanation Jack!

P.S. These video animations of the background and yourself are great.

[sahajranipa]

Phd level video i had to watch this twice plz make detailed videos about such topics. I would watch those with some popcorns and coke.😅😅😅

[luka]

This is how tech youtube should be! Straight to the point, clear explanation, actually useful in production and neutral (no drama).

I like the prefetching with cache the most. The dx is good imo.
Would be interesting to have a deep dive into how this actually works. Passing a promise from the server to the client feels like magic to me.

[saramshshrestha]

I just really love you. You might be one the best teacher out their.

[ikrpqzg]

... to separate fetching from rendering. But made them coupled even more tightly instead

[dominikkarbowski]

I'm waiting for your Next.js course

[dominuskelvin]

I was wondering what all the fuss is all about regarding Suspense. Thanks Jack(In Captain Barbosa's voice)

[collinoly]

I want to hear Ryan Carniato’s take on this one.

[petar]

I'm currently testing the "simple-18" example in React 18, where I've added an ErrorBoundary to handle promise rejections and display a fallback UI. However, I noticed that wrapPromise also throws something (not necessarily an error) when the promise is pending. Despite this, the ErrorBoundary doesn't seem to trigger.

Why doesn't the ErrorBoundary trigger when wrapPromise throws the suspender (a pending promise)?

Furthermore,

How does React differentiate between the throw from wrapPromise used for suspending and the throw that should trigger the ErrorBoundary?

[shyandeabreu]

I think the react team should allow both the waterfall and parallel modes for suspense
Generating promises at the parent level and injecting them kinda breaks the Single responsibility principle that I have been following to create my components
Prefetching is also a no no for me, as the lazy loaded component may be conditionally rendered.
I wouldn't want to touch React 19 if they don't allow best of both worlds, i.e. parallel and waterfall suspense loading

[KayandraJT]

Just like server components, the approach to hoisting promises makes sense to me. It's how I've been doing it for years. Data should be separated from rendering, this is how you avoid buggy applications.

[lucasgiunta]

How those feature will be apply in a project using react router v7, with the loader function, defer etc. I totaly remove the use query dependency sins this implementation has I dont have any call api from component outside of the loader function.

[kkjoe]

For time1 and time2, can we put them in separate suspense and put all suspense under a suspenseList to ensure the waterfall and sequential rendering? If so, what makes the difference here?

[MrZiyak]

so i assume use hook would be only for client components. the parent would be a server component that prefetches all the data. since it will be wrapped in cache, these promises can now be resolved in any of the children. in the client components with the use hook and in other server components with await?

[babyboie]

with the prefetch doesn't that rely on everyone on the team understanding react enough to know why there seems to be and empty call in the top level component and then a call again in the actual components where the data is used? I think without documentation after a few months of not touching this code the reason would be forgotten and someone might remove the hoisted call in a refactor without thinking about it. thoughts?

[srymisclick]

I'm confused here - why go so far with custom memo and "use" instead of making the component async and just awaiting the promise in the component?