The Story of Concurrent React

[@tonytino139]

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]

RIP 🖤 (Thanks for watching!)

[@rohitteja]

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

[@uidotdev]

Thank you! Glad you enjoyed it!

[@thecastiel69]

Harambe was like father to me

[@uidotdev]

🖤🖤

[@sle6423]

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

[@uidotdev]

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

[@Kalazt]

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

[@uidotdev]

Thanks for commenting! ❤️

[@alexbrown7624]

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

[@RasmusSchultz]

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]

Thanks for watching!

[@oussamabenmansour5375]

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]

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

[@dave4148]

"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]

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.

[@walidn2295]

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]

Glad you enjoyed it!

[@ritabest17]

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]

That means so much. Thank you!

[@LaxMariappan]

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

[@uidotdev]

Thank you Lax!

[@Mixesha001]

Loving your content, keep it up!!

[@uidotdev]

Thank you!

[@espressothoughts]

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

[@uidotdev]

Welcome!

[@WajuAbolarin]

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

[@uidotdev]

❤️❤️❤️

[@kohelet910]

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

[@uidotdev]

Thanks for watching!

[@saurabh75prakash]

Glad that I discovered your channel. Thanks 🙏

[@jitxhere]

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

[@uidotdev]

Thank you!

[@SpaceGravy]

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

[@shachi5982]

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

[@AbdelhameedG]

Thank you, Tyler, quality content as usual.

[@uidotdev]

Thank you!

[@rand0mtv660]

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]

Totally. Lots of thought and patience.

[@renatosardinhalopes6073]

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]

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

[@derockx]

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

[@bahaarizk2834]

Wow man! Time to binge watch your content

[@uidotdev]

Welcome!

[@riddixdan5572]

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

[@uidotdev]

Thank you!

[@rtorcato]

The react team left us in Suspense!

[@uidotdev]

🥁

[@juliansoto2651]

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]

Thanks for watching though!

[@DanKaschel]

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

[@juliansoto2651]

@@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)

[@manuelalfonzoml]

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

[@uidotdev]

We'll get there. Thanks for watching!

[@akashpal9691]

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

[@uidotdev]

So glad it was helpful!

[@zakhariihusar6975]

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

[@fadeldrissitoubbali944]

one of the best channels. keep going.

[@uidotdev]

That means a lot. Thank you!

[@Matt36788]

Great video and fantastic explanation, thanks heaps!

[@uidotdev]

You're welcome. Thank you for watching!

[@zummotv1013]

Finally more people are viewing this amazing content .

[@uidotdev]

❤️

[@00ch00]

I wish Harambe was still around to see React 18 😭

[@uidotdev]

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

[@arpitdubey5938]

Loved the video Tyler, keep it up.

[@uidotdev]

Thank you!

[@chrisnguyen5800]

Have to subscribe immediately after watching your video. Appreciated

[@rasmusmerzin]

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

[@KennethBoneth]

The quality of these videos is unbelievable

[@uidotdev]

Thank you!

[@omedjamal1056]

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

[@uidotdev]

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

[@muhammadahmedjaved7691]

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

[@vincenguyendev]

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

[@uidotdev]

Glad it was helpful!

[@gg-gn3re]

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]

RIP 🖤 (Thanks for watching!)

[@tomross4599]

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

[@yogikatba]

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

[@uidotdev]

Planning on it!

[@ikbo]

Beautiful tribute to Harambe. RIP

[@soccermatrix]

One day React is going to be awesome...

[@spicybaguette7706]

RIP Harambe

[@uidotdev]

🍻

[@pope7]

Great videos, learning a lot.

[@adityatripathi1904]

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.

[@caliwolf7150]

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

[@uidotdev]

You do deserve it! ❤️

[@patrickeriksson1887]

Great content; subscribed

[@uidotdev]

Welcome!

[@basil127]

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

[@beto5720]

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

[@uidotdev]

🖤

[@mohtashimali581]

lovinng the content

[@uidotdev]

Thank you!

[@XRoydX]

Wow impressive video. You have my sub :)

[@uidotdev]

Welcome!

[@userrrfriendly1908]

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

[@uidotdev]

Hahaha I appreciate you watching and commenting regardless! ❤️

[@huxnwebdev]

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

[@uidotdev]

ui.dev/react-query 😘

[@JaekSean]

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

[@uidotdev]

😅

[@AndersonSilvaMMA]

Really great content!

[@uidotdev]

Appreciate it!

[@MobiusCoin]

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

[@uidotdev]

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

[@Ahmed2lBadry]

Great work 👏

[@uidotdev]

Thank you!

[@vitinhuffc]

Great presentation

[@uidotdev]

Thank you!

[@drh237]

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]

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

[@DK-ox7ze]

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]

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]

@@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]

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. kzbin.info/www/bejne/kHTYioOfiq6ChNU

[@sakesun]

I complained a lot when Hooks was introduced. Now I have some clue why thing is what it is now.

[@ericlee6029]

Great video! What do you use to edit?

[@uidotdev]

Thanks! Screenflow.

[@oivinf]

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

[@FlorianGamp]

Awesome video!

[@uidotdev]

Thank you!

[@NachoDLF]

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

[@johannes.evol.]

Thanks for the awesome content

[@RavMucha]

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

[@uidotdev]

My specialty.

[@jagsexe]

Great explanation :)

[@uidotdev]

Thank you!

[@Linkplay9]

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

[@uidotdev]

Svelte agrees

[@ozgursulum4116]

Great content ty.

[@uidotdev]

Thank you!

[@netssrmrz]

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

[@uidotdev]

Thanks for watching! 😂

[@rallisf1]

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_]

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

[@ToreyLittlefield]

Beautiful video i love it 💕

[@uidotdev]

Thank you!

[@ParthaSarathylink]

When is the server side components coming . ..?

[@bephrem]

Great video

[@uidotdev]

Thank you!

[@vmaxxk]

All this investment in order to settle on a built-in lodash debounce methodology. Seems like hype and buzz wordy solutions to a problem seasoned developers already know how to solve.

[@bobbyyyjames3065]

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]

Pretty much, yes.

[@bobbyyyjames3065]

@@uidotdev thank you 🙏

[@zemaumm]

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

[@butterfly7562]

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

[@uidotdev]

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

[@seannewell397]

It is and always will be too soon 🖤🦍

[@uidotdev]

🖤

[@amateurwizard]

Long live react

[@uidotdev]

Thanks for watching!

[@Mitsunee_]

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

[@tacticalassaultanteater9678]

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]

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.

[@ELStalky]

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

[@uidotdev]

😅

[@willinton06]

Let them believe it

[@drewhjava]

Umm yea. Just through state in Mobx and call it a day.

[@duckmasterflex]

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

[@uidotdev]

🖤

[@modestas2890]

brilliant

[@uidotdev]

Thank you!

[@mukulr5171]

What a great video 🤍🤍

[@usernameL1]

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]

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

[@kennedyfreitas7548]

He got my undivided attention when he said harambe was alive

[@akiraarchangel2911]

Remix video maybe? Or vue?

[@uidotdev]

Yes and yes. Soon.

[@akiraarchangel2911]

@@uidotdev niceeeeee ty! :D

[@jason-yb9qk]

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

[@uidotdev]

You'll get there!

[@EinarPaulQvale]

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.

[@renatosardinhalopes6073]

"We're in the endgame now"

[@arpanghoshal2579]

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

[@uidotdev]

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]

@@uidotdev makes sense thanks

[@riddixdan5572]

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

[@uidotdev]

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

[@DAB009]

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

[@mrwaqas4049]

Should be little project with all new features

[@KeganVanSickle]

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]

Yes, you're missing a lot.

[@KeganVanSickle]

@@uidotdev I figured. 😆

[@cipherxen2]

@@uidotdev can you please explain?

[@davidnguyen9065]

Will you be updating your courseware to React 18?

[@uidotdev]

Yes. And more.