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

[anapartybharath]

Except the little audio problem. Overall great talk !

[samatzhetibaev]

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

[WildHowlYT]

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

[soy]

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.

[sandipkundu]

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

[jayribagchi]

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!🎉🎉

[pptxn-tv]

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

[andriiv]

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

[HimanshuKumar-xztk]

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

[shaleenchowdhary]

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

[PlamenTsilkov]

Great stuff. Really liked the keys explanation.

[iedi]

awesome, i need more videos like this, deep stuff

[hassaannoor]

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

[thecoder]

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

[daniel]

The best explanation of React ever!🔥🔥🔥🔥

[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

[sajadtorkamani]

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

[paxdriver]

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

[nikosspiropoulos]

This is awesome, thanks for the detailed explanation