Understanding React's UI Rendering Process

This talk by Anthony Garritano (Senior Software Engineer at CrossComm) examines how React implements a Virtual DOM to quickly render changes to the user interface. By the end of this talk the audience will know the basics of UI rendering with JavaScript through a Virtual DOM, understand React’s Reconciliation (the process of determining which Virtual DOM nodes should be turned into real DOM nodes) and have more confidence about the frontend technology decisions they make in their roles.

[@cloudkungfu]

So happy that the examples are of functional components

[@anandyadav_]

😂😂

[@DEVDerr]

Does it really matter tho?

[@VividElites]

@@DEVDerr Yes, there's no need for the extra syntax in class components, just distracting to the eyes from the topic at hand

[@kennyngo8706]

@@DEVDerr Yeah, lifecycle methods vs hooks

[@ninadsonawane1970]

yeahh huge relief. this this this fucking "this" scares me

[@anapartybharath33]

Except the little audio problem. Overall great talk !

[@wealthglitch]

In my opinion, every React Developer should watch this. Very insightful, good job!

[@samatzhetibaev8045]

1:32 HTML & the DOM 3:54 Components and elements 11:52 Shadow DOM? 12:10 Reconciliation 23:25 Rendering 25:37 React Fiber 28:05 Conclusion

[@edwinsandoval4563]

Thanks for sharing this presentation, great work !

[@sajadtorkamani9399]

Awesome talk. This helped me a ton. Thank you!

[@PlamenTsilkov]

Great stuff. Really liked the keys explanation.

[@jayribagchi2182]

Such an awesome talk with so much of clarity! The technical nuances are hard to make anyone understand, and he did the job pretty pretty well. Thankyou for putting this out, for free. So so much to learn!🎉🎉

[@nikosspiropoulos8417]

This is awesome, thanks for the detailed explanation

[@pptxn-tv4419]

TNice tutorials is one of the best intro soft softs I've ever seen. The entire basic worksoftow with no B.S.!

[@shalin1]

Anthony is genius. The talk was super helpful and informative as well, Thank you very much guys.

[@daniel7007]

The best explanation of React ever!🔥🔥🔥🔥

[@Hamzakhan-kx2ql]

thank you for sharing this presentation.

[@Lahiru_Udana]

Great talk. Thanks

[@anujjosh]

Great talk Jake Peralta!

[@fasolplanetarium]

Excellent talk, thanks!

[@hassaannoor]

You cleared a lot of concepts that just didn't make sense to me earlier.

[@abrorxalilov2550]

Great talk, thanks a lot!

[@edchelstephens]

Wow! Great talk!

[@Gruby7C1h]

Really good talk!

[@soy1700]

Great talk. One thing worth noting, when React is diffing list items that came from a .map(), inserting a function call like uuid() into the key property will cause rerenders everytime. The UUID will change between renders because the key is actually calling UUID every time the component's code is executed. You can fix this by instead generating a UUID for the object and persisting it in some state, much like you would with an ID property - which shouldn't be a big deal if you're generating the object from the frontend anyways. Just make sure not to call the function in place of the key -> add a persistent value instead.

[@sahilkazi4518]

didn't get you, can you please ellaborate or point to a resource that does?

[@soy1700]

@@sahilkazi4518 tl;dr - avoid ever doing something like key={uuid4()} in a React list item. The key will change on every rerender of the component, because uuid4() will be called every time. When uuid4() is called upon a rerender, the list item that you set key={uuid4()} will also be rerendered, defeating the purpose of having set a key in the first place. The purpose of keys is to improve efficiency by letting React know that your list item hasn't changed, and thus doesn't need to be rerendered. If your key is a random non-persistent value every time React looks at it, it will be rerendered every single time. This is why people often use an ID property to define a key. ID's are persistent (they will be stored in an array in state somewhere) and they are unique. You need both persistence and uniqueness for a key to work as intended

[@kevinbatdorf]

More important to not use the index from a map function as the key

[@germanaquila2666]

@@kevinbatdorf why not?

[@kevinbatdorf]

@@germanaquila2666 Because if the order of the objects change and the key is the index, React wont render it properly.

[@ulviugur3605]

Thanks a lot !!, good attempt to de-mistify the topic ! I would have preferred to see a visual summary of what happens when X changes, X being DomElement Type, keys, primitives or object values from lement props, etc. Also liking them with hooks would have been "future-proof" :)

[@iedi3]

awesome, i need more videos like this, deep stuff

[@phoe7ix]

Awesome stuff, thanks!

[@sandipkundu5887]

As I am really new to react doing my hands-on this talk gave me a lot of confidence and knowledge as well as interest

[@vijayroy93]

let's learn it together it's good to have react mate 👍

[@haseebali3810]

Informative ⚔️

[@rahulshekhar8498]

I been through loads of video's about soft . but you are the best thanks for your video's.

[@Vilhena6969]

Great talk :)

[@sensingturtle]

Super helpful!

[@HimanshuKumar-xz5tk]

This is gold. I wish he talked how diffing algorithm actually worked.

[@andriiv7033]

This is pretty good for beginners. It’d be good to know how Fiber works in details, for instance.

[@sidharthvyas5883]

Awesome talk, thnx alot

[@kikevanegazz325]

GREAT TALK!

[@leonardoweber5096]

great lecture!

[@mkkosmkkos7389]

true hidden gem

[@thecoder1631]

fiber talk, that's actually react Suspense now and we can actually do that. so cool.

[@maksympinchuk9057]

Thank you, guys, thumb up from me!

[@trueuchiha2042]

well explained!

[@pq6688]

Great talk

[@ChrisAthanas]

Very useful talk

[@funkybuddha1598]

key={index} root of all my problems!!!! Thank you!

[@LorandPalfalvi]

Amazing talk! Thank you allot! But at some point I thought I forgot playback speed at 1.25

[@paxdriver]

This dude should have done way more talks by now. On Symbols, on "this" binding, and service workers and stuff.

[@sunnypaul299]

great talk

[@abhinavkant]

Need more videos of him

[@akash.deblanq]

everyone in the audience is like the same person, same dress, no expression, same messy hair 🥲

[@sabuein]

Thank you.

[@enfieldli9296]

A good source material help me understand the component mounting and useEffect thing

[@alexxu7542]

interesting video!

[@gershomnsengiyumva6572]

wonderful

[@MichaelCampbell01]

Good preso; explained a lot. Is it safe to say in functional components, when a state changes via useState, the entire function (so, the entire component) gets re-run? If so, if I have a "const thing = this_depends_on_state()", thing will get recalculated when the state changes?

[@davidchang3782]

Yes! Everything would get re calculated again

[@HorizonHuntxr]

Yes but only the part of the component that depends on that piece of state would get re-rendered.

[@o.h.n.o.]

Can anyone tell me if React still has this $$typeof: Symbol(react.element) for every element? I tried logging a react element (sandbox) but did not find this. I found _owner and _store instead

[@vishnuojha298]

Learn lot from the video...

[@rickharold7884]

Cool

[@taofeng5769]

what are immersive apps?

[@cloudkungfu]

Mustache moste powerful!

[@JakeJJKs]

great talk, despite the wrong prioritization of star trek vs star wars vs space balls. lol, jk. I got a lot out of it! :)

[@AjayKumar-id7mb]

I am also facing the same problem

[@adventurer_v]

Title: "understanding react rendering". Min 26, "I actually don't know how react rendering really works with Dom" 😁

[@adventurer_v]

But it's though fiber!

[@ObinnaWGMI]

No lie I clicked on this thinking it was an iDubbz video

[@pratikkumar939]

Did not get much info about how React fiber works...

[@smrpkrl]

6:07

[@siddharthpatel6009]

As far as i know only class components have instances.

[@danieltkach2330]

I think so, because technically they are objects. But functional components are functions. I will get React some day ha!

[@prakhartiwari7537]

problems and than volu automate the boi cuz I didn’t know how to sidechain. My one buddy produces riddim and he legit saw my daw

[@sundar_panda]

I did not know John Abraham knows reactjs

[@gonzalowilliams]

you talk at the edge of youtube normal speed

[@cya3mdirl158]

Backend systems are more complicated and interesting. This talk is about Virtual 🏡 which is also interesting and also very simple concept.

[@SarbjeetJohal]

He knows what he is talking about but it assumes some dev experience to follow.

[@heiheichan638]

He kinda looks like idubbbz

[@blackdeckbox]

Idubbbz? Did you change your career?

[@anirbanmaji80]

Why is the speaker using so much cuss words? 😁 Just kidding. Great talk.

[@atsourno]

Thumbs up if you were using key = { index } the wrong way.

[@thatsalot3577]

IDK why but the video looks like it's from 2011.

[@equallyavant]

Sponsored by plaid shirts

[@the_BetaDev]

Why the children do not have $$typeof property?

[@Jack32421]

he did around minute 8

[@thomasstambaugh5181]

@@Jack32421 I have the same question. I reviewed the talk from 7:45 to 8:30, and didn't see or hear the answer. If you're around, could you perhaps offer a brief answer in plain text?

[@Jack32421]

@@thomasstambaugh5181 i didnt point it out but the component is a react element while the h1 is an html element. i guess u can proof it when creating a component inside a component so lets say, reactTableComponent -> contains reactTableRowComponent -> contains labels, and inspect it. also he said its for react components to add a security feature like an uuid. hope that helps

[@thomasstambaugh5181]

@@Jack32421 : Got it, thanks.

[@chillimilli5116]

@@Jack32421 thanks a lot mate. Cheers.

[@RogerFederer777]

I am surprised how much he swears given that it's a conference talk...

[@wonton1019]

I didn’t notice

[@lifeinthebigcity37]

thats why the audio was muted at some points.

[@olezhonnv3215]

Ok, so it is expensive to manipulate the DOM. But React must manipulate the DOM to render a component. So, without react, you manipulate the DOM. And, using react, you indirectly manipulate the DOM. But react adds its virtual dom and reconciliation in addition to actual DOM manipulations. Where is the performance? DOM MUST be manipulated, with react or without react.

[@type3gaming851]

With the help of virtual dom it knows what to manipulate and what doesn't need to change. Without react even for a small change the DOM is getting rendered from scratch.

[@type3gaming851]

@@andTutin Yes you are right, it's been a long time since I've made that comment lol. Now i know.

[@type3gaming851]

@@andTutin prove what

[@type3gaming851]

@@andTutin Yeah bruh that's not happening, earlier sometime told me that so i believed. Now i know i was wrong. You can chill.

[@PavanMuppala]

this looks like flutter

[@narayanchoudhary6950]

No flutter looks like this

[@spinningaround]

Unnecessary complication. Browsers need new language!

[@zahar1381]

владилен?

[@THEkarankaira]

popatlal?

[@rustalisin8950]

all good, but when talking about key & ref string option, why not say why null is used for beginners Assume nothing, it costs u 5 sec , how do u use it with null ? thats what views need .. also to "access a 3rd party library writing attributes to a DOM node" WTF how about this is where u put a hook or address reference to access a 3rd party lib.. why do good scripters confuse the fine detail ? "we have a h1 , an ID as title, & we return it. in teaching simple component, a new user asks why do u return it before calling it ( ) the 1st line = ( ) => needs 5 sec clarity, as when a component runs State / Procs or Props.. a constant living organism? scary (explain how that component comes to life , How hard is it

[@frostbite8238]

Audio is breaking for this video.

[@mrCetus]

Except the little audio problem. Overall great talk !

[@hhlohmann3881]

If you usually change content by innerHTML, then you SHOULD switch at least to a library doing stuff for you

[@hhlohmann3881]

If you are unsure how to use a library, you are one for a framework

[@hhlohmann3881]

You might or need not to be the one to think about "Is it a library or a framework?"