Five years invested in workarounds (mind you, not solutions) to problems inherent to the React model. The concurrency applies not to updating the DOM (which you can't do concurrently) but to all the extra work React has to do *before* updating the DOM. All this scheduling work accomplishes (if used correctly) is optimize *perceived* performance - but the framework is actually net slower than it was before doing this extra work. Meanwhile, other frameworks such as Solid, Svelte, Imba and others have moved on to a model that updates the DOM directly, instead of doing all this unnecessary work on an in-memory duplicate of the entire DOM, which has to be reconciled with the real DOM before doing actual DOM updates. React keeps adding layers of complexity to get around a fundamental design issue - and developers seem to have the perception that all this extra complexity is inherently necessary, and even ironically take pride in knowing how to apply all the new performance features to achieve acceptable performance. Meanwhile, other frameworks are moving on to much simpler models, where these performance features aren't even necessary in the first place. Regardless of how pointless this effort is, there's a market for it, there is job security, and so on - apparently that's the only thing governing the success of any framework in this industry today. 😕

@uidotdev

2 жыл бұрын

Thanks for watching!

@oussamabenmansour5375

2 жыл бұрын

what other frameworks would you suggest ? im still new to react and i would rather not invest too much into it if another framework is objectively better

@TheNewton

2 жыл бұрын

Perception of performance is often more important than factual performance when it comes to UI, but doubly so in the boardroom.

@dave4148

2 жыл бұрын

"optimize perceived performance - but the framework is actually net slower than it was before doing this extra work" -- you've just described horizontal scalability

@johnjackson6262

2 жыл бұрын

Are you saying it's possible to have component based architecture, rerender on state and update the DOM directly in a single page application without reload and without a reconciler? If you could recreate react without the diffing on DOM component and no major drawback then people should start writing the library.

Harambe was like father to me

@uidotdev

2 жыл бұрын

🖤🖤

Excellent work as always. Especially appreciated the love for Harambe. He's eternalized in the test suite of a code base I worked on for several years and will always hold a special place in my heart. 🖤 🦍

@uidotdev

2 жыл бұрын

RIP 🖤 (Thanks for watching!)

As always, excellent presentation! Thanks, Tylor, for taking the time - you always take these high-level concepts and break them into manageable, bite-sized, engaging content. I always learn something new and interesting.

@uidotdev

2 жыл бұрын

That means so much. Thank you!

Becoming a fan of your work Tyler. Glad to see your effort delivers quality output and also well received by devs!🔥

@uidotdev

2 жыл бұрын

Thank you Lax!

This is by far the simplest and best video I've seen on React 18. I'm now a fan!

@uidotdev

2 жыл бұрын

Thank you! Glad you enjoyed it!

First time seeing this channel, and I gotta say, the animation and quality is amazing! Keep up the good work!

Continuously stunned at the level of research and quality put into these videos. Just absolutely incredible

@uidotdev

2 жыл бұрын

This comment and your other one means a lot. Thank you!

Another video, another banger. Thank you for producing such high quality videos for us devs. Always pleasure to learn through these

@uidotdev

2 жыл бұрын

Thanks for commenting! ❤️

This made so many things clear! Thank You for your work. ✨

Your content literally made me pause to check if I had subscribed, this is some top shelf content.

@uidotdev

2 жыл бұрын

❤️❤️❤️

really great context about async rendering in React ! Really cool to have alternative apis for delaying user input (debouncing/throttling) user input like useDeferredValue

@uidotdev

2 жыл бұрын

Glad you enjoyed it!

Coming from today's newsletter 😎 thank for this clear and really interesting video !

@uidotdev

2 жыл бұрын

Thanks for watching!

Thank you, Tyler, quality content as usual.

@uidotdev

2 жыл бұрын

Thank you!

Loving your content, keep it up!!

@uidotdev

2 жыл бұрын

Thank you!

Glad that I discovered your channel. Thanks 🙏

First time discovering this creator, liked, subscribed and commented. Nice job.

your videos are very very very informative, thank you very much for explaining all these things brilliantly

Its scary how small this channel is. Keep the awsome work man ❤️🔥

@uidotdev

2 жыл бұрын

We'll get there. Thanks for watching!

awesome high quality content. I'm surprised why you don't have millions of subscribers yet :D

@uidotdev

2 жыл бұрын

Thank you!

This video made me subscribe. Wonder how i haven't stumbled on the channel before

It was smart that they went with the approach of concurrent "features", instead of an all or nothing concurrent "mode"

Just found the channel. Had to subscribe. Great work!

@uidotdev

2 жыл бұрын

Welcome!

Great video and fantastic explanation, thanks heaps!

@uidotdev

2 жыл бұрын

You're welcome. Thank you for watching!

Have to subscribe immediately after watching your video. Appreciated

Loved the video Tyler, keep it up.

@uidotdev

2 жыл бұрын

Thank you!

Actually I am new to React. I didn't get much of the things but liked your presentation style and teaching style.

@uidotdev

2 жыл бұрын

Thank you!

one of the best channels. keep going.

@uidotdev

2 жыл бұрын

That means a lot. Thank you!

Great videos, learning a lot.

Wow man! Time to binge watch your content

@uidotdev

2 жыл бұрын

Welcome!

This was so helpful, thank you! I still have one niggle: Your Suspense example conflated empty state and loading state.

lovinng the content

@uidotdev

2 жыл бұрын

Thank you!

Thanks for the awesome content

The react team left us in Suspense!

@uidotdev

2 жыл бұрын

🥁

It's a great explanation I've ever seen , I've been struggling to understand Suspense and useTransition hook ;)

@uidotdev

2 жыл бұрын

Glad it was helpful!

What I found fascinating about this is how much preparation work and things in advance they had to do in order to get to here. It's not something that was decided and done in 6-12months. It took years, it's crazy.

@uidotdev

2 жыл бұрын

Totally. Lots of thought and patience.

@renatosardinhalopes6073

2 жыл бұрын

I think it's more like "We can't do this thing right now, but we can do this other thing that would set us in the path for the thing we wanted, and it makes sense to do it because it benefits us" Less of preparation and more of making the right things that could lead to the other big thing

@rand0mtv660

2 жыл бұрын

@@renatosardinhalopes6073 yeah probably. Doesn't make it less impressive in my opinion.

RIP Harambe

@uidotdev

2 жыл бұрын

🍻

I love these kind of videos . Do it for more technologies

@uidotdev

2 жыл бұрын

Planning on it. Thank you for watching!

Finally more people are viewing this amazing content .

@uidotdev

2 жыл бұрын

❤️

Really great content!

@uidotdev

2 жыл бұрын

Appreciate it!

Over the years, it's easy to loose track of context. This video sums up.

@uidotdev

2 жыл бұрын

So glad it was helpful!

2 thousand freaking days! For something that we probably don't need, for a library that will probably be replaced in the next 3 years.

@uidotdev

2 жыл бұрын

Thanks for watching though!

@DanKaschel

2 жыл бұрын

Oh definitely. Most popular framework will totally be replaced in 3 years. Sure.

@juliansoto2651

2 жыл бұрын

@@DanKaschel it doesn't matter if it's the most popular, many libraries have been replaced before, React is no different and WILL certainly be replaced. I wouldn't have said this 1 or 2 years ago, but now most people are aware of React's flaws that we try really hard to avoid React, whether it's using a patch meta-framework or another library. I personally hope it's solidjs, maybe it's svelte idk (both of these have greater levels of satisfaction than react btw)

These story videos are amazing ✨. Please cover vue/nuxt as well.

@uidotdev

2 жыл бұрын

Planning on it!

Great content; subscribed

@uidotdev

2 жыл бұрын

Welcome!

The quality of these videos is unbelievable

@uidotdev

2 жыл бұрын

Thank you!

Hey! Nice video. What tool do you use to animate these videos ? :)

Great work 👏

@uidotdev

2 жыл бұрын

Thank you!

Great video. What font is that on your headlines? Very modern and clean, yet interesting font

Great content ty.

@uidotdev

2 жыл бұрын

Thank you!

I wish Harambe was still around to see React 18 😭

@uidotdev

2 жыл бұрын

I like to think that he's using React 18 in heaven right now.

Awesome video!

@uidotdev

2 жыл бұрын

Thank you!

Terms low level and high level are so confusing in inherently high level ecosystems.

Wow impressive video. You have my sub :)

@uidotdev

2 жыл бұрын

Welcome!

Beautiful tribute to Harambe. RIP

Great video, thanks. what do you think about the future of Svelte (Sveltekit)

@uidotdev

2 жыл бұрын

It's bright! We'll have a video on it soon.

Great explanation :)

@uidotdev

2 жыл бұрын

Thank you!

One day React is going to be awesome...

I've done this on our corporate's multi user client management/invoicing/payroll system for like 10 years now. I guess it's about time, maybe one day these things will be usable instead of me having to make everything myself. RIP harambe

@uidotdev

2 жыл бұрын

RIP 🖤 (Thanks for watching!)

It's still a bit unclear whether upgrading to React 18 is a good idea yet; especially if you are using Next (e.g. Suspense is discouraged for data fetching). Would be great to get your ideas on this Tyler? Thanks

@uidotdev

2 жыл бұрын

If you're using Next, I wouldn't worry about it.

One more reason why they did not go with the service workers is the expensive context switch to perform the task. In case of state calculations it becomes even more evident and obvious to not use workers.

Beautiful video i love it 💕

@uidotdev

2 жыл бұрын

Thank you!

What a great video 🤍🤍

Great video

@uidotdev

2 жыл бұрын

Thank you!

Great presentation

@uidotdev

2 жыл бұрын

Thank you!

useId seems useful, I've been passing down uuid to generate unique ids for form input for a while now.

@uidotdev

2 жыл бұрын

Yeah. Esp nice since the id is stable across the server and client too.

Another excellent video on how ill-conceived react is. A never-ending trail of fixes disguised as features.

@uidotdev

2 жыл бұрын

Thanks for watching! 😂

Great video! What do you use to edit?

@uidotdev

2 жыл бұрын

Thanks! Screenflow.

brilliant

@uidotdev

2 жыл бұрын

Thank you!

That's one one giant small step for leap for mankind. man,

@uidotdev

2 жыл бұрын

😅

3 years ago I decided to do more front-end work and learned react, hooks where the way to go. Went on a couple interviews and they cut me dry because their codebase was still in older react versions and I couldn't use hooks. I learned from an old colleague same shit went on with Vue. Frameworks where chaning too fast for the corporate world to adopt and new releases were considered unstable bacause custom components getting incompatible... I got so frustrated I devoted to Svelte, new kid in the block but simple AF. Long story short my components from 2019 still work on latest svelte and I can inject them in any webpage, no matter what framework it uses. Best choise I've ever made.

@dhkatz_

2 жыл бұрын

I mean most older React components will still work too. They might throw some warnings now but there is nothing wrong with progress

I got more knowledge about react in one video than my first year of using react..

I'm still really confused on Suspense. How do I tell react that a component in Suspense's children is not ready yet?

We is this so high quality dammit!? we don't deserve this kind of good quality lol

@uidotdev

2 жыл бұрын

You do deserve it! ❤️

Great video, didn't understand a thing, but great video nonetheless.

@uidotdev

2 жыл бұрын

Hahaha I appreciate you watching and commenting regardless! ❤️

In the input and list example you gave, how's using the new concurrent mode different from debouncing the rendering of the list on input change, as far as visual rendering performance is concerned?

@uidotdev

2 жыл бұрын

Great question. With a debounced input, you would have to wait for the debounce to timeout before the list work even begins. With useDeferredValue, the input state updates immediately AND the list work begins as soon as the input state changes. With a 500ms debounce timeout, useDeferredValue improves the speed by 500ms minimum.

@DK-ox7ze

2 жыл бұрын

@@uidotdev In that case, how is React able to stop rendering of the current list in between when a new state change happens in input? If all this is happening on the main thread, then it's not possible to stop rendering of the list in middle, as js code runs synchronously in the browser, and the input change can only be processed in the next tick of the event loop.

@uidotdev

2 жыл бұрын

That's what the Fiber reconciler in React 16 provided - a way to pause low-priority work when something with a higher priority comes in. Part of it is also the `requestIdleCallback` feature in modern browsers. This video goes into much greater depth about how Fiber works, and how it paved the way for concurrent rendering. kzread.info/dash/bejne/jHepu7Kihay1ftY.html

Man I wish my boy Harambe was here to witness this updatw

@uidotdev

2 жыл бұрын

🖤

great content 👏👏 keep it up !!

@uidotdev

2 жыл бұрын

Thank you! ❤️

"this is not a performance problem, this is fundamentally a scheduling problem" Keep telling yourself that 😅

@uidotdev

2 жыл бұрын

😅

@willinton06

2 жыл бұрын

Let them believe it

The next course will be on react query I guess?? 👀

@uidotdev

2 жыл бұрын

ui.dev/react-query 😘

Badia h

useDeferredValue is debounce an alternative? It's a little confusing as a beginner

@uidotdev

2 жыл бұрын

Yes. Think of it as a smarter denounce that is aware of what react is working on and when it's finished.

Will you be updating your courseware to React 18?

@uidotdev

2 жыл бұрын

Yes. And more.

So for now we kind of "opt in" to these Concurrent Features on case-by-case bases in the same manner we would identify a complex situation that calls for Memoization?

@uidotdev

2 жыл бұрын

Pretty much, yes.

@bobbyyyjames3065

2 жыл бұрын

@@uidotdev thank you 🙏

Hi. Can you do npm vs yarn? or something like that.

"We're in the endgame now"

Ooooor you could make rendering the list less expensive by building a faster VDOM or just not using one in the first place ;^)

@uidotdev

2 жыл бұрын

Svelte agrees

Long live react

@uidotdev

2 жыл бұрын

Thanks for watching!

When is the server side components coming . ..?

Ah, Papyrus font in the outro. Trolling UI people, I see...

@uidotdev

2 жыл бұрын

My specialty.

He got my undivided attention when he said harambe was alive

So React is finally catching up with what Angular has been able to do out of the box for years now? Am I missing something?

@uidotdev

2 жыл бұрын

Yes, you're missing a lot.

@KeganVanSickle

2 жыл бұрын

@@uidotdev I figured. 😆

@cipherxen2

2 жыл бұрын

@@uidotdev can you please explain?

Sorry, but I don’t get it. I’ve never come across an instance where I would need this (I think). Do you maybe have some real world example of where this would be absolutely necessary?

@uidotdev

2 жыл бұрын

They are rare, tbh. Essentially when you have rendering perf issues.

I really like the new API, it feels like a natural addition to React. Now the next logical step is to separate Fiber from React and have it provide scheduling primitives which both React, the application and other libraries can use. Unfortunately, this will never happen because React is a corporate project and as such has no motivation whatsoever to segment its scope into small self-contained projects, so Fiber will remain a feature of React, an advantage over the competition rather than a contribution to open source.

@uidotdev

2 жыл бұрын

I know at one point the react team was working on scheduling primitives with the chrome team. Not sure if anything ever came of that.

Harambe was alive haha oh starting it off with a heart breaker

@uidotdev

2 жыл бұрын

🖤

It is and always will be too soon 🖤🦍

@uidotdev

2 жыл бұрын

🖤

as a person who just started learning react i have no idea what this video is about :")

@uidotdev

2 жыл бұрын

You'll get there!

@EinarPaulQvale

2 жыл бұрын

And you probably don't really need to know. One thing that is under-communicated in React discourse these days is that all these new primitives and performance optimizations are not necessarily needed. A small and relatively simple React app will still most likely perform acceptably. React is still the same at its core as it ever was, with most importantly a very good component model. And its very close to plain js, which is also a good benefit. If you truly need more power, then React now offers primitives to achieve this. But you don't *have* to use any of them.

Why can't I just use something like debounce or throttle in that example instead of using useDeferredValue ?

@uidotdev

2 жыл бұрын

Those aren't aware of what React is working on. UDV is like an intelligent debounce that is aware of React's current workload.

@arpanghoshal2579

2 жыл бұрын

@@uidotdev makes sense thanks

how do you make animations like this?

@uidotdev

2 жыл бұрын

It's a combination of a bunch of stuff.

I love u

@uidotdev

2 жыл бұрын

I love you!

now that concurent is here. what's next in line?

@uidotdev

2 жыл бұрын

Data fetching with Suspense seems to be the next big thing.

@DAB009

2 жыл бұрын

@@uidotdev does Nuxt 3 js has something similar? Sorry I am still learning things.