Understanding React's UI Rendering Process
Vložit
- čas přidán 11. 07. 2024
- 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.
So happy that the examples are of functional components
😂😂
Does it really matter tho?
@@DEVDerr Yes, there's no need for the extra syntax in class components, just distracting to the eyes from the topic at hand
@@DEVDerr Yeah, lifecycle methods vs hooks
yeahh huge relief. this this this fucking "this" scares me
Except the little audio problem. Overall great talk !
In my opinion, every React Developer should watch this. Very insightful, good job!
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!🎉🎉
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
Great stuff. Really liked the keys explanation.
Awesome talk. This helped me a ton. Thank you!
Anthony is genius. The talk was super helpful and informative as well, Thank you very much guys.
Thanks for sharing this presentation, great work !
TNice tutorials is one of the best intro soft softs I've ever seen. The entire basic worksoftow with no B.S.!
This is awesome, thanks for the detailed explanation
The best explanation of React ever!🔥🔥🔥🔥
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
let's learn it together it's good to have react mate 👍
Great talk. Thanks
Excellent talk, thanks!
awesome, i need more videos like this, deep stuff
Great talk, thanks a lot!
Wow! Great talk!
Awesome stuff, thanks!
Awesome talk, thnx alot
Really good talk!
Great talk Jake Peralta!
thank you for sharing this presentation.
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.
didn't get you, can you please ellaborate or point to a resource that does?
@@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
More important to not use the index from a map function as the key
@@kevinbatdorf why not?
@@germanaquila2666 Because if the order of the objects change and the key is the index, React wont render it properly.
You cleared a lot of concepts that just didn't make sense to me earlier.
This is gold. I wish he talked how diffing algorithm actually worked.
great lecture!
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" :)
I been through loads of video's about soft . but you are the best thanks for your video's.
Great talk :)
Super helpful!
GREAT TALK!
This is pretty good for beginners. It’d be good to know how Fiber works in details, for instance.
Informative ⚔️
Very useful talk
everyone in the audience is like the same person, same dress, no expression, same messy hair 🥲
fiber talk, that's actually react Suspense now and we can actually do that. so cool.
Great talk
well explained!
Thank you, guys, thumb up from me!
great talk
true hidden gem
Amazing talk! Thank you allot! But at some point I thought I forgot playback speed at 1.25
This dude should have done way more talks by now. On Symbols, on "this" binding, and service workers and stuff.
Need more videos of him
key={index} root of all my problems!!!! Thank you!
Thank you.
interesting video!
wonderful
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
A good source material help me understand the component mounting and useEffect thing
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?
Yes! Everything would get re calculated again
Yes but only the part of the component that depends on that piece of state would get re-rendered.
Learn lot from the video...
Cool
what are immersive apps?
Title: "understanding react rendering". Min 26, "I actually don't know how react rendering really works with Dom" 😁
But it's though fiber!
Mustache moste powerful!
I am also facing the same problem
Didn't understand a thing. any other video recommendation?
Did not get much info about how React fiber works...
No lie I clicked on this thinking it was an iDubbz video
great talk, despite the wrong prioritization of star trek vs star wars vs space balls. lol, jk. I got a lot out of it! :)
As far as i know only class components have instances.
I think so, because technically they are objects. But functional components are functions. I will get React some day ha!
6:07
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
Idubbbz? Did you change your career?
I did not know John Abraham knows reactjs
you talk at the edge of youtube normal speed
He kinda looks like idubbbz
He knows what he is talking about but it assumes some dev experience to follow.
Why is the speaker using so much cuss words? 😁 Just kidding. Great talk.
IDK why but the video looks like it's from 2011.
Backend systems are more complicated and interesting. This talk is about Virtual 🏡 which is also interesting and also very simple concept.
Thumbs up if you were using key = { index } the wrong way.
Sponsored by plaid shirts
Why the children do not have $$typeof property?
he did around minute 8
@@Jacktherippler1 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?
@@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
@@Jacktherippler1 : Got it, thanks.
@@Jacktherippler1 thanks a lot mate. Cheers.
владилен?
I am surprised how much he swears given that it's a conference talk...
I didn’t notice
thats why the audio was muted at some points.
Unnecessary complication. Browsers need new language!
popatlal?
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.
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.
@@andTutin Yes you are right, it's been a long time since I've made that comment lol. Now i know.
@@andTutin prove what
@@andTutin Yeah bruh that's not happening, earlier sometime told me that so i believed. Now i know i was wrong. You can chill.
this looks like flutter
No flutter looks like this
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
Audio is breaking for this video.
Except the little audio problem. Overall great talk !
If you usually change content by innerHTML, then you SHOULD switch at least to a library doing stuff for you
If you are unsure how to use a library, you are one for a framework
You might or need not to be the one to think about "Is it a library or a framework?"