So happy that the examples are of functional components

@anandyadav_

3 жыл бұрын

😂😂

@DEVDerr

3 жыл бұрын

Does it really matter tho?

@VividElites

3 жыл бұрын

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

@kennyngo8706

2 жыл бұрын

@@DEVDerr Yeah, lifecycle methods vs hooks

@ninadsonawane1970

2 жыл бұрын

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

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

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

Great stuff. Really liked the keys explanation.

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

3 жыл бұрын

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

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. 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

2 жыл бұрын

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

@soy1700

2 жыл бұрын

@@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

2 жыл бұрын

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

@germanaquila2666

2 жыл бұрын

@@kevinbatdorf why not?

@kevinbatdorf

2 жыл бұрын

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

Thanks for sharing this presentation, great work !

The best explanation of React ever!🔥🔥🔥🔥

This is awesome, thanks for the detailed explanation

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

Great talk. Thanks

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

Great talk Jake Peralta!

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

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

awesome, i need more videos like this, deep stuff

Excellent talk, thanks!

Really good talk!

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" :)

Great talk, thanks a lot!

thank you for sharing this presentation.

Wow! Great talk!

Awesome stuff, thanks!

Awesome talk, thnx alot

Great talk :)

Thank you, guys, thumb up from me!

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

Super helpful!

GREAT TALK!

great lecture!

true hidden gem

Very useful talk

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

Informative ⚔️

Great talk

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

well explained!

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

great talk

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

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

Thank you.

wonderful

Need more videos of him

interesting video!

Learn lot from the video...

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?

@davidchang3782

3 жыл бұрын

Yes! Everything would get re calculated again

@HorizonHuntxr

3 жыл бұрын

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

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

@adventurer_v

3 жыл бұрын

But it's though fiber!

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

Cool

Mustache moste powerful!

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! :)

I am also facing the same problem

As far as i know only class components have instances.

@danieltkach2330

2 жыл бұрын

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

what are immersive apps?

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

6:07

Idubbbz? Did you change your career?

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

Didn't understand a thing. any other video recommendation?

I did not know John Abraham knows reactjs

you talk at the edge of youtube normal speed

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

He kinda looks like idubbbz

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.

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

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

Sponsored by plaid shirts

Why the children do not have $$typeof property?

@Jacktherippler1

3 жыл бұрын

he did around minute 8

@thomasstambaugh5181

3 жыл бұрын

@@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?

@Jacktherippler1

3 жыл бұрын

@@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

3 жыл бұрын

@@Jacktherippler1 : Got it, thanks.

@chillimilli5116

3 жыл бұрын

@@Jacktherippler1 thanks a lot mate. Cheers.

Unnecessary complication. Browsers need new language!

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

2 жыл бұрын

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.

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

@wonton1019

3 жыл бұрын

I didn’t notice

@lifeinthebigcity37

3 жыл бұрын

thats why the audio was muted at some points.

владилен?

this looks like flutter

@narayanchoudhary6950

2 жыл бұрын

No flutter looks like this

popatlal?

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

@hhlohmann3881

3 жыл бұрын

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

@hhlohmann3881

3 жыл бұрын

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