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
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
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.
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!🎉🎉
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?
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" :)
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.
@@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
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
![[доклад] Подробно о React Reconciliation, или Как React добился 60 fps](http://i.ytimg.com/vi/NPXJnKytER4/mqdefault.jpg)
![[доклад] Подробно о React Reconciliation, или Как React добился 60 fps](/img/tr.png)
Except the little audio problem. Overall great talk !
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!
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
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
Title: "understanding react rendering". Min 26, "I actually don't know how react rendering really works with Dom" 😁
But it's though fiber!
everyone in the audience is like the same person, same dress, no expression, same messy hair 🥲
Welcome to the industry of developers
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.
Mustache moste powerful!
This is pretty good for beginners. It’d be good to know how Fiber works in details, for instance.
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 stuff. Really liked the keys explanation.
IDK why but the video looks like it's from 2011.
This is gold. I wish he talked how diffing algorithm actually worked.
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.
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!🎉🎉
Except the little audio problem. Overall great talk !
This dude should have done way more talks by now. On Symbols, on "this" binding, and service workers and stuff.
No lie I clicked on this thinking it was an iDubbz video
awesome, i need more videos like this, deep stuff
Thank you, guys, thumb up from me!
He knows what he is talking about but it assumes some dev experience to follow.
Didn't understand a thing. any other video recommendation?
Awesome talk. This helped me a ton. Thank you!
TNice tutorials is one of the best intro soft softs I've ever seen. The entire basic worksoftow with no B.S.!
Great talk Jake Peralta!
This is awesome, thanks for the detailed explanation
The best explanation of React ever!🔥🔥🔥🔥
You cleared a lot of concepts that just didn't make sense to me earlier.
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
Great talk. Thanks
Anthony is genius. The talk was super helpful and informative as well, Thank you very much guys.
great talk, despite the wrong prioritization of star trek vs star wars vs space balls. lol, jk. I got a lot out of it! :)
fiber talk, that's actually react Suspense now and we can actually do that. so cool.
key={index} root of all my problems!!!! Thank you!
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.
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.
Did not get much info about how React fiber works...
true hidden gem
you talk at the edge of youtube normal speed
Idubbbz? Did you change your career?
I am also facing the same problem
Awesome talk, thnx alot
Amazing talk! Thank you allot! But at some point I thought I forgot playback speed at 1.25
A good source material help me understand the component mounting and useEffect thing
Learn lot from the video...
Audio is breaking for this video.
I did not know John Abraham knows reactjs
Awesome stuff, thanks!
what are immersive apps?
He kinda looks like idubbbz
Need more videos of him
interesting video!
Thank you.
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!
thank you for sharing this presentation.
Really good talk!
Sponsored by plaid shirts
wonderful
great lecture!
Great talk
great talk
Thumbs up if you were using key = { index } the wrong way.
GREAT TALK!
Very useful talk
6:07
Excellent talk, thanks!
Great talk, thanks a lot!
Thanks for sharing this presentation, great work !
Wow! Great talk!
well explained!
Cool
Informative ⚔️
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.
Super helpful!
Great talk :)
popatlal?
Why is the speaker using so much cuss words? 😁 Just kidding. Great talk.
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.
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?"
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.
владилен?
Backend systems are more complicated and interesting. This talk is about Virtual 🏡 which is also interesting and also very simple concept.
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