This, but for everything. I've already lost an uncountable amount of useful data because it was only ever on a deleted discord... not to mention friends and conversations lost.
@@alaskann In that vein, yes. In general usage of closed walls behind login and/or without possibility to have publicly available chat log, like Discord, is bad for information preservation, to say the least.
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
Imagine something that is used by hundreds of thousands of developers for a myriad different application cases STILL BEING FASHIONED AFTER WHAT'S BEST FOR EFFIN' META. Seriously, the community must yank the whole thing and ECMA/ANSI the hell out of it. It's too dangerous to be stewarded by the META/VERCEL people anymore.
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.
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!
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.
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
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?
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.
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.
@@ivan.jeremic it seems like a pretty appropriate comment to me, given that, in the video, Theo made a comment about his potentially dubious pronunciation of the word. It seems sensible to document, for anyone curious, the actual origin, meaning, and pronunciation of the word.
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
They want everything to pop out at once i guess, which means every component should be a child under suspense, if not, it will cause the popcorn ui problem which means unpredictable CLS order
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."
This is so frustrating :) First you get this shiny promise about suspense being good for rendering async stuff, and then they say that they remove it. What is the point? To create more buzz around the library?
Inability to stay on course and living reactively can be a sign of depression. Depressed libraries concentrate on immediate at hand problems, because their programmers are in a stressful state and they cannot focus on long term goals.
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.
@@everythingisfine9988 Yep, never been happier with migrating all of my projects (main projects and side projects) to SolidStart React has become pure cancer over the years, and tho NextJS was supposed to make React less painful for the devs but Next itself has turned into yet another tumor lmfao And to all the React fanboys out there saying "bUT yOu hAvE sKiLlL iSsUes": I've been using React ever since 2015 and NextJS since mid-2021, I know all the ins and outs of the React ecosystem and it's by far the most chaotic thing from a DX point of view
@@DmitriiBaranov-ib3kf Tbh I haven't used Vue or its meta framework Nuxt yet, but I'm sure you're definitely right I mean... Hell! At this point even JQuery is much more efficient than React lmao
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.
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.
so suspense render is not O(n^2) anymore, but now it's O(n+1/2) It's still too many renders. Should just be O(n). This difficulty is just because people are using a rendering framework for fetching. If you decouple them, all these problems go away. Instead of suspense I just use a loading flag and keep a controller that handles business logic separate of rendering. UI (react) requests stuff, controller signals the UI through events when there's something new to render. This means I can just await on promises without blocking the UI, I can make them parallel with standard syntax, I can make it lazy, prefetch from the parent or even reload at any point, I can show a spinner with 100ms delay (so if the data comes in immediately, no spinner is shown), I can cancel requests if they take too long, etc etc and it's all very compact and easy to read and debug, plus it's also very performant. This way of working gives you 4 kinds of component: - simple components that just render their props (simple, all updates come from parent) - components that render updates to the event streams they got from props (not interactive but responds to events) - components that get a controller from props so they can get event streams and call controller methods (interactive and responds to events) - components that instance a controller and pass it to whichever component will need it, through context or props (coordinators) An upside is that since data is separate from UI, you can easily switch components for rendering the same data. Yes, you could have mini-views in separate components, even reacting to the same data source simultaneously.
So boundary actually triggers when a promise is thrown, which terminates the rendering because of the exception, and that forces to re-render each component again untill all of them under the same are done so it no longer has to throw and just render their contents with the resolved promises?
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!
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?
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.
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)?
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
@@dahahaka it’s reference to the movie 300 where the Spartans take pride and glory over what’s a decent proposal to make things work and solve an issue. Basically the react way of doing things is self contained functions with minimal external and internal bindings and the React team will die on this hill even after the rest of the world has discovered better solutions. This is Reaaccctttt!
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 :)
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.
@@m12652 I donno it gave a decent answer. This is the summary: Key Differences 1. Syntax and Usage: • React: Uses a component-based approach where Suspense is a wrapper component. • Svelte: Uses a template-based approach with the await block embedded directly in the markup. 2. Scope and Flexibility: • React: Suspense can be more flexible with nested fallbacks and works well with React’s ecosystem and Concurrent Mode. • Svelte: The await block is straightforward and easy to use directly within the template for quick asynchronous handling. 3. Error Handling: • React: Error boundaries are used in conjunction with Suspense to handle errors. • Svelte: The await block has a built-in :catch clause for error handling. 4. Dependencies: • React: Often relies on additional libraries or utilities to handle data fetching in a way that integrates with Suspense. • Svelte: Provides a built-in way to handle asynchronous operations without additional dependencies.
Even tho its GQL, but the data colocation, not needing to worry about updating stuff when removing data deps a tree needs or removing components. Lots of really cool stuff that could be fun for the community to get exposure to
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.
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...
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
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.
Two solutions seem reasonable to me 1. Avoid using multiple children inside suspense 2. Change react to not rerender child inside suspense if that already resolved successfully.
React and not rerender in the same sentence? You must be thinking of another framework that probably already supports signals, which completely eliminates all this nonsense patches on top of patches just to fix messed up state management
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!
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
Something no one seems to mention: suspend on fetch wasn't really a supported stable feature in React 18. It was experimental. Just because libraries like react-query implemented it, doesn't make them any less experimental. The React team has every right to change what they clearly marked as unstable. Suspend on promise resolution using use hook is only stable with React 19. If you had it in React 18 and moved to production, then it's your fault, not the React team's.
Got it. So making something, that people found a way to use, practically useless, is the answer to this problem… Patch on top of patch to patch the patch where things went wrong… Amazing
@@Cmacu to be fair, it's not technically useless; they just enforced the rule on how they wanted it to be used. It's react-query that implemented the anti-pattern to perfection. If you tried to suspend on fetch without react-query, you'd know why it's an anti-pattern; it will cause infinite rendering without memoization of the fetch request, which, again, is an anti-pattern as useMemo is only meant for optimization, not breaking infinite render. They meant for the promise to be passed from outside the suspense boundary from the beginning.
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.
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.
Agree, I hate these guys too. But social media platforms have always been about clickbaits and will aways be that. Can't change them. Ask MrBeast, he knows best :)))
This is react, rerendering stuff is the only reason this whole library works in a first place… The whole thing is basically just a jQuery $(selector).load(url) with different syntax…
@@Cmacu Rerendering stuff when it needs to be rerendered. Why does a sibling cause a rerender of a component? Data goes down, events go up, and suspense goes sideways?
@@MarcelRobitaille think about it… how do you remove/replace the fallback from the DOM and how do you know when to do it?… Hint: It’s what happens when you can’t handle state management properly… Sooner or later you might realize that the problem with react is react itself, re-rendering stuff is just the one of symptoms, it’s like a headache… and all this suspense and hook stuff is taking painkillers ignoring the core issue…
@@Cmacu I still don't see why suspense can't render the fallback until all of the children "resolve", cache the result of each child when it resolves, and render the cached results when they all resolve. I see the argument for why just rerendering and not dealing with caching is cleaner, but I think this solution is better than serializing everything like they are doing and it's less hacky than some of the patches of builtins they've been doing.
@@MarcelRobitaille ok. Let me try with clarifying question. So let’s say you load the first suspended element and the others are not ready. The DOM still contains the fallback… Where does the state from the first element go? If react had a cache like you are describing why would re-rendering ever be a thing (regardless of suspense)?
I switched to native Android development with Kotlin just weeks ago and I'm in love with the language and mobile development in general especially that Kotlin has only jetpack compose framework for Android. These frameworks ruined the web and I couldn't keep up.
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.
wake up babe, another react leaky abstraction just dropped
lmaoooooooooo
mode: "parallel" | "waterfall"
100%, also having parallel be the default to not break api.
"popcorn" | "waterfall"
That is too outrageously obvious for the React team. Get out of here.
>Open source project
>Discord
Every single damn time. Use discourse or something similar, don't hide behind discord walls.
This, but for everything.
I've already lost an uncountable amount of useful data because it was only ever on a deleted discord... not to mention friends and conversations lost.
Interesting, what do you mean exactly? A project gets open sourced and then immediately support goes to Discord?
@@alaskann In that vein, yes. In general usage of closed walls behind login and/or without possibility to have publicly available chat log, like Discord, is bad for information preservation, to say the least.
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
Meta doesn't use react query internally. Everything is using Relay which precompile all the data dependencies and preloads it.
What's testing?
@@hunterxg am sure meta knows that it is not okay if react works for them but breaks for all other devs, right?
@gerkim3046 why? They built it for themselves anyway.
@@zweitekonto9654 that's not true. They have stake in others using it.
Imagine getting to upgrade to the current version of a framework 😱
Right?
I'm glad that react is not a framework wink wink
Imagine something that is used by hundreds of thousands of developers for a myriad different application cases STILL BEING FASHIONED AFTER WHAT'S BEST FOR EFFIN' META.
Seriously, the community must yank the whole thing and ECMA/ANSI the hell out of it. It's too dangerous to be stewarded by the META/VERCEL people anymore.
@@PhilipAlexanderHassialissimple, just fork, improve and maintain it
@@svenmify exactly
Just an unopinionated javascript library. Nothing to see here.
A framework/library being unoptimized? What a surprise
They said unopinionated, not unoptimized.
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.
Your solution is 10 times better. I hate clever solutions, give me simple stuff that you can easily reason about.
✋ I do this too. No issue!
Technically loading state is the only stable solution in React 18. Suspend on promise was never stable in 18.
Also on team loading state!
Goat comment ❤
"Second Act: The Suspense Builds"
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!
They didn't use Ts in react last time I check
Wow.. so much stuff going on just to produce HTML. :)
i really now just using a server (Hono or express) + ejs template engine and Alpinejs for interactivity
t. no coder or only coded todo list on web
index.html solves this.
Hopefully being sarcastic here.
Have you seen all the ways we can produce CSS? 😂
Congrats to Phase on managing to get this chaotic recording into an actual video
For real
🪄 Thank you! It seemed crazy on stream but was a lot of fun to edit down.
This was actually my thoughts
Og stream was like 3 hours I think lol with all the live coding
Thanks for all your work on this @Theo - much appreciated.
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.
How does memoization help here
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
Watch the video again. The change is made for use cases when fetches are optimized, which is the case at Meta
Wait.... how are you doing rendering heavy (CPU bound) work in a useEffect?
If they gave a crap they wouldnt use react anyway
I just spent an hour watching a dude read a blog and a bunch of tweets lol
fr
Lol yeaaaa only some of these are good.....more are bad than good imo but there are some great insights still.....sometimes
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?
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.
Thank god i work with Svelte
solution: get out of web and go into application space
Thanks for covering this Theo and team for the great job editing it. Bummed I didn’t get to see the live stream, though. Thanks 😊
Egregiously over-engineered.
Thank you Theo and team, another super informative video! I would definitely appreciate a video all about Suspense itself
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.
I like comparing the React team's response to CrowdStrike's response. Both of them messed up, but one response was _significantly_ better!!
Whats the vs code theme?
Thanks for covering this topic, as a daily R3F user, it's terryfying.
Why not make it an option for Suspense?
React team knows better what you should use without any options☝️🤓
Zustand is German for State as in Status it's pronounced
tsoo shtunt
I would say it's more like shtant, with a long 'a' like in the solfege Fa.
like zoo stunt?
who asked?
Me @@ivan.jeremic
@@ivan.jeremic it seems like a pretty appropriate comment to me, given that, in the video, Theo made a comment about his potentially dubious pronunciation of the word. It seems sensible to document, for anyone curious, the actual origin, meaning, and pronunciation of the word.
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
They want everything to pop out at once i guess, which means every component should be a child under suspense, if not, it will cause the popcorn ui problem which means unpredictable CLS order
Avoiding popcorn UI in favor of presumably skeletons that renders into an explosion of something barely related
Anyway like Theo once said, some of these things need careful consideration in the context of one's Application, and not just the documentation
When you announced the different acts, I couldn't help but hear the Law&Order "TUNNDUNN" sound in my head xD
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."
Everyone: Don’t go chasing waterfalls. Please stick to the rivers and the lakes that you’re used to.
React team: Hold my beer…
This is so frustrating :) First you get this shiny promise about suspense being good for rendering async stuff, and then they say that they remove it. What is the point? To create more buzz around the library?
Inability to stay on course and living reactively can be a sign of depression. Depressed libraries concentrate on immediate at hand problems, because their programmers are in a stressful state and they cannot focus on long term goals.
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.
Solid JS is the future, PERIOD!
Shoutout to Svelte as well
Both are quality ✌️
Vue
@@everythingisfine9988 Yep, never been happier with migrating all of my projects (main projects and side projects) to SolidStart
React has become pure cancer over the years, and tho NextJS was supposed to make React less painful for the devs but Next itself has turned into yet another tumor lmfao
And to all the React fanboys out there saying "bUT yOu hAvE sKiLlL iSsUes": I've been using React ever since 2015 and NextJS since mid-2021, I know all the ins and outs of the React ecosystem and it's by far the most chaotic thing from a DX point of view
@@DmitriiBaranov-ib3kf Tbh I haven't used Vue or its meta framework Nuxt yet, but I'm sure you're definitely right
I mean... Hell! At this point even JQuery is much more efficient than React lmao
At this point those client will sigh "this suspense is killing me"
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.
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.
I think Solid JS solved this a few years ago.
so suspense render is not O(n^2) anymore, but now it's O(n+1/2)
It's still too many renders. Should just be O(n).
This difficulty is just because people are using a rendering framework for fetching. If you decouple them, all these problems go away.
Instead of suspense I just use a loading flag and keep a controller that handles business logic separate of rendering. UI (react) requests stuff, controller signals the UI through events when there's something new to render.
This means I can just await on promises without blocking the UI, I can make them parallel with standard syntax, I can make it lazy, prefetch from the parent or even reload at any point, I can show a spinner with 100ms delay (so if the data comes in immediately, no spinner is shown), I can cancel requests if they take too long, etc etc and it's all very compact and easy to read and debug, plus it's also very performant.
This way of working gives you 4 kinds of component:
- simple components that just render their props (simple, all updates come from parent)
- components that render updates to the event streams they got from props (not interactive but responds to events)
- components that get a controller from props so they can get event streams and call controller methods (interactive and responds to events)
- components that instance a controller and pass it to whichever component will need it, through context or props (coordinators)
An upside is that since data is separate from UI, you can easily switch components for rendering the same data. Yes, you could have mini-views in separate components, even reacting to the same data source simultaneously.
So boundary actually triggers when a promise is thrown, which terminates the rendering because of the exception, and that forces to re-render each component again untill all of them under the same are done so it no longer has to throw and just render their contents with the resolved promises?
I'm so glad I'm not working in React anymore.
what do you use ?
@@emmanuelezeagwula7436 real men use Vue 3/Nuxt 3
@@emmanuelezeagwula7436 probably jquery or php, or MUH vanilla js
@@emmanuelezeagwula7436 i moved to svelte 5 a couple months ago, its been great. so much less thought put in to renders, it just works.
@@emmanuelezeagwula7436unemployed
React in my eyes is no longer the prime example of innovative design that saved the web.
Move fast and break things
They are focused so much on promoting nextjs
NextJS in a nutshell
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!
Thanks theo for this valuable infos
If I use normal fetch instead of react-query, will it hit API everytime it re-render?
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?
I have moved to solidjs and i love it
No jobs for Solid tho :/
Solid or Sveltekit are fantastic. But yeah, the job market 🤷♀️
Soooo, compiler could not improve performence in this case and still keep it parallel?
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.
What if i just don't want to use react query ?
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)?
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
Kicking you down the well: This is Reaaaact!!!
@@Cmacu I don't get it xD can you explain?
@@dahahaka it’s reference to the movie 300 where the Spartans take pride and glory over what’s a decent proposal to make things work and solve an issue. Basically the react way of doing things is self contained functions with minimal external and internal bindings and the React team will die on this hill even after the rest of the world has discovered better solutions. This is Reaaccctttt!
@@Cmacu ahhh see I didn't know about this react hill :D I do get the reference, ty!
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 :)
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.
Haven’t done react in awhile, is suspense just like svelte’s await blocks?
But do sveltes await blocks behave the same way? I'd be surprised if they do.
great question for chatgippidy
@@m12652I’m not sure if they can resolve multiple promises, I’ve always created a function to resolve multiple and await the one function.
@@gageracer that clowns a waste of electricity when it comes to anything that wasn't old in 2021
@@m12652 I donno it gave a decent answer. This is the summary:
Key Differences
1. Syntax and Usage:
• React: Uses a component-based approach where Suspense is a wrapper component.
• Svelte: Uses a template-based approach with the await block embedded directly in the markup.
2. Scope and Flexibility:
• React: Suspense can be more flexible with nested fallbacks and works well with React’s ecosystem and Concurrent Mode.
• Svelte: The await block is straightforward and easy to use directly within the template for quick asynchronous handling.
3. Error Handling:
• React: Error boundaries are used in conjunction with Suspense to handle errors.
• Svelte: The await block has a built-in :catch clause for error handling.
4. Dependencies:
• React: Often relies on additional libraries or utilities to handle data fetching in a way that integrates with Suspense.
• Svelte: Provides a built-in way to handle asynchronous operations without additional dependencies.
Solid is the answer
You still use Twitter 🤮
...how did i just watch a 55min video on react suspense... I dont even use react...
Why is every component in a suspense rerendered every time, and not only the one wich received data?
Is the solution to not use Suspense?
At this point, i dont even know what we're solving.
*to not use React
@@vnshngpnt naw React is good.
Can you please cover golang trying to remove the ability to use linkname and providing zero alternative for developers?
I feel like you're missing use deferred query, which solves the roller coaster problem
Yes please. Love these technical videos 😊
Would you be open to doing a dive into relay?
Even tho its GQL, but the data colocation, not needing to worry about updating stuff when removing data deps a tree needs or removing components. Lots of really cool stuff that could be fun for the community to get exposure to
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.
Watching this live was a journey
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...
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
really good job man.
AAAAAAAA can someone tell me the name of the browser he’s using, I can’t remember the name
Arc
The purple one
Y'know what? All I need is sass and tsc. Why should I use a JavaScript framework??
Me laughing at this while writing my plain web components that will work unmodified for the next 15 years.
another theo video reading an article LET'S GOOOOOOOOOOOOO
This is so far from an article read lol I filmed for 3 hours and live coded like 6 demos.
This is a nightmare. I’d prefer that they left it as the old way and introduce an attribute to change the loading behavior.
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.
React is a joke... I am moving to SolidJs...
Mee too
I'm moving to mobile
@@youarethecssformyhtml Try Tauri framework
It is overcomplicated. Just make a wrapper and draw substitution instead of blocking component.
Theo, do a video on full history of suspense.
Probably after React 19 is released
Please Talk about suspense and suspending and the hooks surrounding it.
Thankfully, my code is already garbage enough to use one large query on top-level which passes all data down.
the more frontend videos I watch, the more eager i become to escape this hell
Two solutions seem reasonable to me
1. Avoid using multiple children inside suspense
2. Change react to not rerender child inside suspense if that already resolved successfully.
React and not rerender in the same sentence? You must be thinking of another framework that probably already supports signals, which completely eliminates all this nonsense patches on top of patches just to fix messed up state management
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!
The only positive comment here about React 💀💀💀💀
What about a single promise not resolving. Then nothing renders.
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
Something no one seems to mention: suspend on fetch wasn't really a supported stable feature in React 18. It was experimental. Just because libraries like react-query implemented it, doesn't make them any less experimental. The React team has every right to change what they clearly marked as unstable. Suspend on promise resolution using use hook is only stable with React 19.
If you had it in React 18 and moved to production, then it's your fault, not the React team's.
Got it. So making something, that people found a way to use, practically useless, is the answer to this problem… Patch on top of patch to patch the patch where things went wrong… Amazing
@@Cmacu to be fair, it's not technically useless; they just enforced the rule on how they wanted it to be used. It's react-query that implemented the anti-pattern to perfection. If you tried to suspend on fetch without react-query, you'd know why it's an anti-pattern; it will cause infinite rendering without memoization of the fetch request, which, again, is an anti-pattern as useMemo is only meant for optimization, not breaking infinite render. They meant for the promise to be passed from outside the suspense boundary from the beginning.
31:38 - Small world - I know Robert!
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.
It's called "milking content" when you have nothing better to talk about.
Can I laugh in remix?
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.
react developers discuss the simplest way to get five inputs to a server jpg
Idk I think most of this is fixed by moving to Solid or something
you should make a video on how Microsoft edge is the best browser cuz copilot is better than google now
Why do you make fake tweets for your thumbnails? It's basically clickbait and you should stop.
Agree, I hate these guys too. But social media platforms have always been about clickbaits and will aways be that. Can't change them. Ask MrBeast, he knows best :)))
Anyone want to explain the problem here to a junior?
I still don't understand why the old way had to rerender the siblings. Why couldn't suspense just be basically like promise.all?
This is react, rerendering stuff is the only reason this whole library works in a first place… The whole thing is basically just a jQuery $(selector).load(url) with different syntax…
@@Cmacu Rerendering stuff when it needs to be rerendered. Why does a sibling cause a rerender of a component? Data goes down, events go up, and suspense goes sideways?
@@MarcelRobitaille think about it… how do you remove/replace the fallback from the DOM and how do you know when to do it?… Hint: It’s what happens when you can’t handle state management properly… Sooner or later you might realize that the problem with react is react itself, re-rendering stuff is just the one of symptoms, it’s like a headache… and all this suspense and hook stuff is taking painkillers ignoring the core issue…
@@Cmacu I still don't see why suspense can't render the fallback until all of the children "resolve", cache the result of each child when it resolves, and render the cached results when they all resolve. I see the argument for why just rerendering and not dealing with caching is cleaner, but I think this solution is better than serializing everything like they are doing and it's less hacky than some of the patches of builtins they've been doing.
@@MarcelRobitaille ok. Let me try with clarifying question. So let’s say you load the first suspended element and the others are not ready. The DOM still contains the fallback… Where does the state from the first element go? If react had a cache like you are describing why would re-rendering ever be a thing (regardless of suspense)?
Frontend hell -- the d***thing get overtly complicated for no good reason. No wonder people get sick, tired and frustrated doing Frontend.
I switched to native Android development with Kotlin just weeks ago and I'm in love with the language and mobile development in general especially that Kotlin has only jetpack compose framework for Android.
These frameworks ruined the web and I couldn't keep up.
Queue South Park “were sorry “ episode
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.