How React 19 Almost Broke The Web 

mode: "parallel" | "waterfall"

From the library side of things, the fact that React does not ship its own typescript types bundled toghether during installation makes things so much harder. It makes it so that the installation/upgrades need to be orchestrated with the "overrides" field in the package.json (to match the types package) is something that makes it much more of a chore (especially making sure you have the right version of the types installed 😮‍💨). I understand from the outside some may see it as "oh, you guys should know to do this..." or "common! it can't be that hard!". But given that we are already swamped, this extra burden is something that's most of the time just not worth the hassle. Please ship your own typescript types!

>Open source project >Discord Every single damn time. Use discourse or something similar, don't hide behind discord walls.

Just an unopinionated javascript library. Nothing to see here.

Congrats to Phase on managing to get this chaotic recording into an actual video

Nowadays, I still use the old "{ loaded ? : }" to fully control all the data fetching behaviors. even naivest person in the team can understand what it does. instead of guessing the "". I know it's verbose, but serious question though: is there any speed, performance, render improvement, or edge case where is good for? I only care about performance improvement, hence if the can bring a better UX to the end user. My own DX is less matter in this case.

I'm so glad I'm not working in React anymore.

This is a nightmare. I’d prefer that they left it as the old way and introduce an attribute to change the loading behavior.

This is a trash change. If your component is slow to render, you almost certainly abstracted that computation away into a use effect or similar hook - so the thing they are optimizing for is something that the developer should have addressed. Making this force a waterfall execution is optimizing for bad behavior and a major code smell

23:22 "What we should do instead is immediately unwind the stack as soon as something suspends, to unblock to loading state." I agree the stack should be unwound instantly, but not by forcibly unwinding it with the new waterfall mechanism, but rather it should be naturally unwound by programmers taking care to offload any heavy work off the main thread. Can't be hackishly fixing main thread sluggishness by introducing this type of solution. This is just the first thought that has come to mind, willing to be convinced otherwise.

Ah I was at React Summit :D Was excited to see you there but then saw you were remote. I'm sure my company will send me off to the US on in 2025 though, so always next time :)

Zustand is German for State as in Status it's pronounced tsoo shtunt

I have moved to solidjs and i love it

Why not make it an option for Suspense?

Really good video. I don't really know much about React but still accessible and interesting. It reminds me of the back and forth that was happening in Laravel over lazy loading models through their relations with other models, which from a performance viewpoint is awful, but it's really convenient. It has the same trade-off between trying to foresee in advance which data you'll need and should preload. This might be a case of the "No Free Lunch" theorem ( en.wikipedia.org/wiki/No_free_lunch_theorem ), where it's not possible to have one implementation that's the best for all use cases.

That’s why react won, the people behind it and around it are just superb and they have made a fantastic community. Thanks for the video, having watched your streams I can imagine how long this took to film and edit!

Watching this live was a journey

I think Solid JS solved this a few years ago.

another theo video reading an article LET'S GOOOOOOOOOOOOO

Honestly, I'm with the react team on this... Because the specific fetchs are so tightly coupled with how a specific componentvworks only its dev can decide what to fetch. Manually hoisting those to prefetch seems semantic. But itd be nice if they could figure that parallel rendering/not re-rendering siblings out

Theo, do a video on full history of suspense. Probably after React 19 is released

Can you please cover golang trying to remove the ability to use linkname and providing zero alternative for developers?

React in my eyes is no longer the prime example of innovative design that saved the web.

I know nothing about React but I always thought that data only flow top down, so what is a reason to refetch and even rerender all components in suspense?

Y'know what? All I need is sass and tsc. Why should I use a JavaScript framework??

While it's an interesting topic, I could watch only first half as I realized I was getting sleepy with the same point rephrased 25 times. Maybe because it's from the stream and not a written youtube vid effect but oh well.

HTMX and a templating language.

Some people are like - oh my god! Let's cancel react. It's useless. React 19 is in beta to get to know issues like these right? Am I missing something? And as shown in thumbnail, react apologized on x I guess.

I'm glad im on svelte kit now

3 api calls seems just wrong from start.

This just shows that JS is crap and the web should move to something ACTUALLY performant...

Can I laugh in remix?

Not relevant to the purpose of the video, but that KidSuper dude has a really cool website and unbelievably overpriced clothes

So when will the world realise React is unstable and not suiteable for use in applications with a long lifetime?

broke reactjs app not web

1 min, 28 views. Bro fell off 💀

wake up babe, another react leaky abstraction just dropped

Imagine getting to upgrade to the current version of a framework 😱

It's actually interesting how React team managed to miss on this, since there are select few libraries that are even able to work with Suspense. The fact that their tests didn't include react-query is pretty funny

"Second Act: The Suspense Builds"

Wow.. so much stuff going on just to produce HTML. :)

You still use Twitter 🤮

If you have a slow component shouldn’t you memoize it? Seems like we have a pattern to handle that situation already. Also why not just create a second component. Keep suspense the same and create another version that blocks.

Egregiously over-engineered.

Why do you make fake tweets for your thumbnails? It's basically clickbait and you should stop.

I just spent an hour watching a dude read a blog and a bunch of tweets lol

It is not ok for components to trigger a rerender of previous ones. Suspense should not waterwater, otherwise it is useless. They should keep fetching all at once, but find solution to do not rerender components with previously fired promises.

If they want to change the semantics, they should introduce a new name for it and not change the existing primitive. They can deprecate the old name and give people time to adjust or have the old behaviour via a plugin for devs/teams that want/need it. Even though it's a major version bump, changing the behaviour of a freqently used primitive underneith people is an awful move.

Why not just wrap each component in its own suspense boundary though. The way I tend to think of it is a component that does its own data fetching should probably be its own page. Its okay for a component to do a mutation though since in that case are are re-rendering everything anyway

Theo, NextJs, TS ruined React. This guy is stressful to watch. Did everything unsubbed, not interested, don't recommend channel, and still popping up on my feed! Why youtube!?

Suspense was never announced stable for data fetching. Here is what happens when you jump on a hype train too soon :( "Suspense-enabled data fetching without the use of an opinionated framework is not yet supported. The requirements for implementing a Suspense-enabled data source are unstable and undocumented. An official API for integrating data sources with Suspense will be released in a future version of React."

Move fast and break things

I like comparing the React team's response to CrowdStrike's response. Both of them messed up, but one response was _significantly_ better!!

Solid JS is the future, PERIOD!

solution: get out of web and go into application space

React is a joke... I am moving to SolidJs...

You frontend guys need the love of Jesus in your lives.

Everyone: Don’t go chasing waterfalls. Please stick to the rivers and the lakes that you’re used to. React team: Hold my beer…

my brother here will spin everything even sebastian's arrogant tweet as a good thing , lol solid better

Thank god i work with Svelte

...how did i just watch a 55min video on react suspense... I dont even use react...

I typically use React-query and render the loading / error states in the component. What I don’t understand about Suspense is why would you want to couple loading states for multiple components into one? Ie. if data is ready for one component just render it. Isn’t that a better UX? Why wait for *all* child components to finish fetching before rendering them all at the same time?

Two of the big issues that caused this seem to be that they failed to understand the use case, and did not note that the change was a breaking change to previous behavior. The response to feedback though is one of the best examples of properly handling things I've seen in awhile.

can't they just put every child of a suspense(Or every other parent component for that matter) in a promise wrapper so that they're forced to run fetching/rendering in parallel and wait for a Promise.all(Settled)?

At this point those client will sigh "this suspense is killing me"

I mean the whole way suspense works is why I've never liked it. Throwing to signify is still async fetching just is not what a throw is for (correct me if I'm wing about this). I know they need to use javascript primitives under the hood so I see why just never liked or used this way only for code splitting

I'm not a web developer, I don't understand why would you need to render anything at all until all the components in the suspense boundary got their data back? This parallel to sequential change just seem like the wrong "solution" to the problem. Isn't not rendering the components until everything is ready the whole purpose of this suspense?! So Why is it rendered/rum multiple times? With multiple rendering passes you turned on O(N) problem to O(N^2)... that doesn't seem wise to me...

Thanks for covering this topic, as a daily R3F user, it's terryfying.

Each day we stray further from simplicity. I remember when I picked up React because I wanted dynamic content, I now realise after observing other frameworks that React is probably the most verbose framework out there to solve this task, and now they're adding more behaviour that gives you more mental overhead when considering project design. This could be a skill issue on my part, and I've loved the concept of keeping everything in one file, but ever since server components I feel like the complexity of these files only seem to grow as more things are introduced, leading to more things to consider. Is it getting out of hand yet? Has it always been so out of hand? Seeing this now, I feel so out of touch. Time to look for simpler solutions.

Both of these implementations suck. The solution is to only render each component once, Promise.all() style. Solves both concerns (parrelism and CPU) with no visible drawbacks. Don't do the same work twice and always do the work as soon as you feasibly can.

Maybe I'm naive, but couldn't Suspense just render everything inside hidden elements (or some equivalent in the virtual DOM) and then unhide them as they become available? Then it wouldn't need to discard any renders and you'd get optimal performance.

Maybe I'm not web-brained enough for this but both of these seem unreasonably inefficient. Why doesn't first fetch the data for each element inside, asynchronously, without progress in one element re-rendering the others, and then when all are ready, renders the whole hierarchy in one step? That way you don't get the insane constant re-rendering of the React 18 implementation, and don't get the slowness of the React 19 implementation.

You are an extremely intelligent person. Not always right, but scary smart making me realize being lazy and entitled is not an option. You’re more talented and knowledgeable than me in many ways. So Thank you for doing this and helping some of us keep up!

If you cared about things like cpu usage and ease of development you wouldnt use react anyway, so who cares? React exists to give you more work to do, so you can have a job.

Solid is the answer

Frontend hell -- the d***thing get overtly complicated for no good reason. No wonder people get sick, tired and frustrated doing Frontend.

I don't get why it can't be parallel and without re-rendering. And if re-rendering is a must, at least do it once after the last thing loaded, not after each of them loads.

Thanks for all your work on this @Theo - much appreciated.

no wonder... that's why facebook freeze my laptop, react suck rerendering each component!

I feel like you're missing use deferred query, which solves the roller coaster problem

Well, every programming language has its framework developers it deserves! 🙄🥳

Whats the vs code theme?

This is an inevitable situation when you ignore the native capabilities of the web platform and hand it all over to abstractions you don’t own. The Promise API and some very simple patterns makes all this hand-wringing go away. We need to stop injecting so much magic into our projects and go back to good engineering principles.

learning about react makes me very happy I'm not working in this world of CS. like it's all very odd abstractions and i often don't understand why they make such odd decisions

Thanks theo for this valuable infos

hear me out, what if you didn't use a framework

I'm sincerely tired of all this JS abstractions. Sincerely. I don't want to deal with FE anymore in my life.

Thankfully, my code is already garbage enough to use one large query on top-level which passes all data down.

Anyone want to explain the problem here to a junior?

When you announced the different acts, I couldn't help but hear the Law&Order "TUNNDUNN" sound in my head xD

why isn't there just some "prerender" hook on components that can be used for the prerendering instead of actually rendering the whole component and throwing it away xD

Me laughing at this while writing my plain web components that will work unmodified for the next 15 years.

theo pls make 10 minutes videos :(

It is overcomplicated. Just make a wrapper and draw substitution instead of blocking component.

And this is why I only use vanilla html and js

Thank you Theo and team, another super informative video! I would definitely appreciate a video all about Suspense itself

Glad the react team is going to delay the release

you should make a video on how Microsoft edge is the best browser cuz copilot is better than google now

If I use normal fetch instead of react-query, will it hit API everytime it re-render?

My head hurts. This is seriously making me consider Alpine JS 😅