React 19 has a Problem
Vložit
- čas přidán 17. 06. 2024
- React 19 has a problem, and that's speed. With a new change to how suspense works, the SAME CODE behaves massively different in how it's executed between 18 and 19. I love what Tk Dodo does for the react community, and turns out, the react team listened to his (and others) concerns.
--- sources
tk_dodos blog article (great read!!): tkdodo.eu/blog/react-19-and-s...
-- my links
second channel (in depth videos): / @joshtriedupstash
discord: / discord
github: github.com/joschan21 - Věda a technologie
Im not a JS dev but im confused by the logic applied from react devs. WHY would you change the default behavior of a functionality if there are other options or rather it should be the developer that fixes the issue. If you have an expensive component why not make it also be self suspending that would eliminate the need to throw away the first render. Or if that is not possible than why not add an "attribute" to Suspense defining how it handles its children. for example default is "parallel" if you need to you set it to "sequential".
This feels like classic React. Create a problem then discuss solutions.
It'd classic React. Fix problems by causing more problems.
because it is not changing any default behavior. Suspense is going to be release in full with React 19 only. The behavior that these lib authors used was still beta. If you didn't notice only lib authors are complaining about this, because they went ahead and used React's internal/beta features.
Bro our community engineers just to engineer. Like we need to solve important problems, not make problems to be solved like a jimmy neutron episode
This is why they have release candidates. People test it out and find issues like these. Hope it gets sorted.
Na, this is why you have words. You use those words to talk to people before making sweeping changes like this.
@@drewhjava wo...wor.....ds?
This is actually a good change.
We are seeing a literal 1 second delay in skeletons showing due to expensive rendering passes down the tree.
React better release their component to fix this though.
So much for an "unopinionated" JavaScript "library". React is a damn circus.
So looks like I’m staying on React 18/NextJS 14 for the foreseeable future
Great vid! I noticed "disk cache" on the first example, doesn't that mean they are returned form the browser cache?
Only react has these problems
Very curious to see what the solution to this is since they’ve walked back. Seems they liked this feature at Facebook and it helped them.
Easiest way would seemingly be a prop for the method, parallel or waterfall on each Suspense. Default it to parallel.
"Still recommend preloading but recognize it's not always practical" What do they mean by that? Sure you can preload initial data serverside but if the component is dynamic with dynamic data (like what most of react is used for) you need parallel fetching. I have no idea what they were thinking with this. Am I just missing something?
Dude, they literally call SPA approach a "legacy mindset of building FE apps". Going all-in for the Backend-centric rendering. Now we're expected to clean freaking browser cache from the server... The proclaimed benefit is "performance" but IMO it's more about control over ecosystem than anything else.
Lol. So they're saying Google Maps is built on a legacy mindset? That's rich...
@@IvanKleshnin I'd get it if this was ruby on rails or laravel + livewire where serverside rendering is integrated properly, but they expect us to do that in NextJS ? Yeah no, that's crazy. The whole point of react is client side responsiveness, if they take that away might as well use HTMX+backend of choice and call it a day.
@@andrewdrone yep, just today we've got another controversy. This time it's React-19 being 6x slower than React-18 on some SPA example. The release is suspended and they apologize like "We forgot that many people still use SPA and other legacy tech. But don't worry, we'll fix your problem". So, assumingly, it's a shame and a problem that some people use SPA and don't buy into new shiny NextJS approach @_@ I agree with all your points btw 🤝
"Pretty fast, in the tradition of react" - I wouldn't really remember React for its speed :)
Does this only apply to client components? Or also RSC with suspense?
only client components, RSCs still fetch in parallel
Fortunately, I haven't used suspense and don't have plans to use in future 🙂
You definitely should use it but certainly not in react 19 for now.
How do you do partial rendering/streaming?
Suspense is actually great, though. If you're currently not using suspense in situations you could benefit from, that means you're effectively waiting for everything to load before showing anything to the user which is worse than even the react 19 version of suspense.
Looks like React 19 is trying out the new "slow and steady wins the race" strategy-except it's losing😆
React is THE problem.
Just add a prop to enable sequential rendering. This is where partial pre rendering will come in handy.
what extention browser you use????
Arc
its problem is that its a cyptic shit that shouldnt be used anywhere
Hi Josh. Programmierst du uns eine Schach-Website?
Thank you so much
vue or svelte is the way. we need to jquery react.
never.
Exactly Vue, Svelte or Solidjs are much much better.
none of those are big enough improvements to react objectively
@@gcash49 What qualifies to be objectively better? perfs? bundle size? reactivity? maintainability ? DX? cause react is behind in most of these aspects. But definitely react has a very huge community and a lot of loyalists.
Angular
“listening to our problem” 😹
i mean they created the problem
svelte 5 in this time 👀
No nooooo , i try it before , its awesome but has less community packages / libraries and the support of typescript in svelte components is weird
Thats it everything else is good
They have all you need nowadays even shadcn
@@gamingwolf3385you are way too outdated on svelte 😂 Svelte 5 supports TS everywhere with no problems
@@gamingwolf3385 You don't need a svelte specific library/package. If it works on standard sites it works on svelte.
@@gamingwolf3385 I believe Svelte 5 solved the inability to use TS outside . Generally, yes, Svelte has a smaller community, but I find shadcn-svelte works great, and TS/JS libraries work without a framework-specific wrapper. I far prefer it to React
Only react would release a ‘mandatory waterfall feature’…
Great vid mate!
Sure it's good they listened... But why did they make such a breaking change without feedback in the first place?
JS land is embarrassing at times.
React is the new jQuery
Now let's fix the compiler and then introduce some bugs in react 21
Svelte 5 FTW
I use suspense alot, i think it will slow most of the people that use it.
I think it should be a prop in the Suspense component, somthin flike
const [solution, setSolution] = useVue()
thank you bro, it's very amazing
Doesn't impact me .. interesting though
Why don't people pay more attention to this??
React (facebook) is like Adobe, need to switch away from
Yay
Glad we decided to move away from react. Tired of these insane changes. All these 'fixes' and its still significantly compared to Solid, Vue, Svelte.
3s is fast? Bro, real programmers measure in micro or milli seconds.
No 😂
A slug is fast if you compare it to a sloth, fwiw
Gonna stick with React 18 till 2026...😂
yo!
Solid JS is the future
NextJs should have been built on Go nd htmx or something 🗣️ instead of React nd Js
React is a problem
🤣
😆✅
Js is problem.
And I love it! ❤
Use something else
Javascript is a problem
0:19 feels gay
Love from Bangladesh ❤️❤️
Ta-da that's why React is inferior
so irrelevant but i have a crush on u now
Everyone whining about react. Just use something else. Oh wait, there isn’t a single job in svelte or whatever other libraries you prefer.
lol agree, why complaining about a release candidate? the whole purpose of them releasing the candidate is to get feedbacks like this!
@@statuschannel8572 exactly. Honestly I think it’s great that we as a community have a voice and we can prevent stuff like this from coming out and they actually want to listen to us
Tell me you're a web developer without telling me you're a web developer.
React is for people who don't know anything about software engineering
@@marcuss.abildskov7175 React is for people who aren't broke, like you.
@@marcuss.abildskov7175 lol only from react 19 there is a compiler and it's magic. so by your logic everyone who uses a library or framework don't know anything about software engineering.
Tell me you're a blind hater without telling me you're a blind hater moment!
React18+Next14
It's 2024, stop using react..
Why? Doesn't make sense.
Stop using react