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!🎉🎉
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 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
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
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" :)
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?
@@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
Pretty much all the frameworks are converging on similar patterns. Some React/Solid-like system will be built into browser standards in the near future I’m sure.
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.
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
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
In my opinion, every React Developer should watch this. Very insightful, good job!
Except the little audio problem. Overall great talk !
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
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!🎉🎉
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 👍
TNice tutorials is one of the best intro soft softs I've ever seen. The entire basic worksoftow with no B.S.!
Anthony is genius. The talk was super helpful and informative as well, Thank you very much guys.
Great stuff. Really liked the keys explanation.
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.
This is gold. I wish he talked how diffing algorithm actually worked.
This is pretty good for beginners. It’d be good to know how Fiber works in details, for instance.
The best explanation of React ever!🔥🔥🔥🔥
Great talk Jake Peralta!
Awesome talk. This helped me a ton. Thank you!
awesome, i need more videos like this, deep stuff
fiber talk, that's actually react Suspense now and we can actually do that. so cool.
You cleared a lot of concepts that just didn't make sense to me earlier.
This is awesome, thanks for the detailed explanation
I been through loads of video's about soft . but you are the best thanks for your video's.
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
Thanks for sharing this presentation, great work !
Great talk. Thanks
This dude should have done way more talks by now. On Symbols, on "this" binding, and service workers and stuff.
Awesome stuff, thanks!
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" :)
key={index} root of all my problems!!!! Thank you!
everyone in the audience is like the same person, same dress, no expression, same messy hair 🥲
Welcome to the industry of developers
thank you for sharing this presentation.
Thank you, guys, thumb up from me!
Really good talk!
Awesome talk, thnx alot
Great talk, thanks a lot!
Excellent talk, thanks!
Wow! Great talk!
Amazing talk! Thank you allot! But at some point I thought I forgot playback speed at 1.25
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.
true hidden gem
great lecture!
Need more videos of him
what are immersive apps?
GREAT TALK!
Great talk
Very useful talk
great talk
Thank you.
A good source material help me understand the component mounting and useEffect thing
well explained!
Great talk :)
Informative ⚔️
Super helpful!
interesting video!
Learn lot from the video...
wonderful
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!
Did not get much info about how React fiber works...
No lie I clicked on this thinking it was an iDubbz video
I am also facing the same problem
6:07
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!
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
Cool
you talk at the edge of youtube normal speed
He knows what he is talking about but it assumes some dev experience to follow.
Idubbbz? Did you change your career?
I did not know John Abraham knows reactjs
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?"
He kinda looks like idubbbz
Didn't understand a thing. any other video recommendation?
IDK why but the video looks like it's from 2011.
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.
Why is the speaker using so much cuss words? 😁 Just kidding. Great talk.
Sponsored by plaid shirts
Unnecessary complication. Browsers need new language!
Pretty much all the frameworks are converging on similar patterns. Some React/Solid-like system will be built into browser standards in the near future I’m sure.
владилен?
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.
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.
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.
popatlal?
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 !