Mastering React Reconciliation - Advanced React course, Episode 6

Рет қаралды 9,799

Күн бұрын

👉 Based on the "Advanced React" book, Chapter 6: www.advanced-r...
🎬 Episode 6: Deep dive into diffing and reconciliation in React
00:34 What's in the course
01:31 The problem we're going to solve
03:24 React reconciliation & diffing - mounting
05:45 React reconciliation & state update
08:37 Why we can't create components inside other components
09:48 The answer to the mystery
11:18 Reconciliation & arrays
12:58 Reconciliation & keys
14:47 Key & memoized list items
18:34 State reset technique
20:35 Using "key" to force reuse of an existing element
21:30 Why we don't need keys outside of arrays?
👩🏻‍💻 Code examples:
1. Initial mystery: advanced-react...
2. Components inside other components: advanced-react...
3. Fix with re-positioning of inputs: www.advanced-r...
4. Index as key: www.advanced-r...
5. ID as key: www.advanced-r...
6. State reset: www.advanced-r...
7. Reuse of element with key: www.advanced-r...

Пікірлер: 64

@belkocik 7 ай бұрын

Great work! This channel should be mentioned in react docs for sure 😊

@developerwaypatterns 7 ай бұрын

Thank you! 😊

@zizzz10 28 күн бұрын

so far best react course for in-depth knowledge

@FranciscoBernad-v8v 7 ай бұрын

This is literally the best react content head to head with information straight from Dan itself or Joshua! Can't really express how useful all your videos have been.

@developerwaypatterns 7 ай бұрын

Thank you ☺️🥰

@Ahmad-vk3ro 6 ай бұрын

Thank you very much for your detailed explanations on React. You are one of, if not the best, at providing clear guidance. I truly appreciate it

@developerwaypatterns 6 ай бұрын

Thank you! 😊

@alieman9154 7 ай бұрын

Big heart for this! Watching as the first thing in the morning. It helps to stick after read the chapter in your book. So 🎉

@developerwaypatterns 7 ай бұрын

Awesome, glad it works! 😊

@kenman3449 7 ай бұрын

The content is really useful and interesting!. Love it. I probably never know/ need to dig more than 1week to find out the things you are teaching with this 24mins content. Nice juicy nutrition. Highly recommend to buy the book as well. They are just like hamburgers and Coca-Cola, it's a nice meal set. Looking forward to watching the rest (10 chapters?) video coming through P.S. Sorry, I couldn't give you an autograph

@developerwaypatterns 7 ай бұрын

Thank you! 😊

@abhisheksharma1031 7 ай бұрын

OMG, this is really awesome. Thanks for all the efforts!!

@shaungedye7727 3 ай бұрын

This is a fantastic resource and clear explanations, thanks :) FYI - There is a bug @12:21 - should remove the "!" before "isCompany", or else swap the return values. At the moment if isCompany is true it will return [{ type: Checkbox }, { type: Input }, { type: Input }] and if it is false it will return [{ type: Checkbox }, null, null]

@developerwaypatterns 3 ай бұрын

Ooops! Indeed 🤦🏼‍♀🤦🏼‍♀ Great catch!

@oscarljimenez5717 7 ай бұрын

20/10 videos. Thanks for everything :)

@gg.cip0t 7 ай бұрын

thank you so much, this explanation clearerd my doubts

@esrafilelahi5733 7 ай бұрын

best videos about reactjs

@Himanshuyadav-us6me 6 ай бұрын

Amazing tutorial, thanks

@innerstateofflow7777 7 ай бұрын

This tutorial is of God tier quality. Do you have any plans to create an advanced tutorial about useEffect or to delve into useEffect in depth?

@developerwaypatterns 7 ай бұрын

Not exactly about useEffect, but there will be a video on data fetching, which includes useEffect

@0xtz_ 7 ай бұрын

this is amazing tons of informations thanks 😮

@trystan2k 6 ай бұрын

Perfect explanation. I will share all videos with my Team, this is gold !!!

@ikbo 7 ай бұрын

Are you going to go over react server components? Excellent videos btw! 👏

@developerwaypatterns 7 ай бұрын

Thank you! 😊 I probably will, but not very soon.

@pizzaitaliana9835 4 ай бұрын

Quick question. We conditionally render Input component. Initial value for checkbox is false. Form is mounted and first check evaluates to null as well as the second one. Am I missing something or there is a small hidden bug ? Shouldn't second check omit the exclamation mark ?

@developerwaypatterns 4 ай бұрын

Can you post a link to this code in something like codesandbox? A bit hard to answer without seeing the behaviour

@MZ-fv2jk 7 ай бұрын

happy birthday!

@slwebdev9603 7 ай бұрын

@7:06 what do you mean by objects are created locally

@developerwaypatterns 7 ай бұрын

The element before and after re-render. Elements are covered in the second video of this series, it explains them in more detail

@НикитаПожидаев-ы4л 7 ай бұрын

Happy birthday🎉🎉🎉

@debjyotisarkar9578 7 ай бұрын

00:48 🔄 React utilizes a Virtual DOM to efficiently update existing elements with new data. 03:42 🔄 React updates components based on type and props changes, rebuilding sub-trees when necessary. 07:02 ⚛️ Understanding React's handling of arrays in Virtual DOM and preserving internal state during re-renders. 11:28 ⚛️ Understanding the significance of 'key' attribute in React for optimizing list performance. 14:20 ⚛️ Understanding the impact of 'key' attribute in React arrays on re-rendering and mounting components. 18:03 ⚛️ React detects dynamic arrays through keys to manage elements effectively After 9 months this still so helpfull thanks🎉.

@iamsaqib-dev 7 ай бұрын

I can't count the cats. if I start counting, I might miss something important.😅

@developerwaypatterns 7 ай бұрын

Cats are important too! 😅

@firewatermoonsun 5 ай бұрын

kzbin.info/www/bejne/maqkk52uZdKZga8 Here if element is created inside component and of equal type before and after parent rerender, that element rerenders because it's newly recreated and actually different object with different reference memory address. Am I correct? The main point is different memory address.

@developerwaypatterns 5 ай бұрын

Yep!

@favanzzo 7 ай бұрын

you should do a complete react (video) course! love your videos. Keep it up

@jayakumar9976 7 ай бұрын

Coding example along with code are easier to understand and follow. Thanks!!

@auscapulet9389 Ай бұрын

amazing work, thanks

@Xomder1 7 ай бұрын

You have the best courses.

@developerwaypatterns 7 ай бұрын

Thank you! 😊

@hamidhamri5384 3 ай бұрын

you should be on react team

@drrodopszin 3 ай бұрын

Around 12mins there was this pattern: `{isSomething ? : null}`. Will it be the same result if I use `{isSomething && }`? Or in that case instead of having an `undefined` element in the array the element is omitted (therefore the bug stays)? I am asking because if these 2 are not equivalent, then this solution has a very high risk of suffering "death by refactor": someone sees it, assumes it was written by somebody who forgot about `&&` and rewrites it like that. Update: it works as expected, a potential refactor won't kill it.

@developerwaypatterns 3 ай бұрын

Yep, it's the same, I just slightly prefer the explicit version rather than &&, for me it's easier to read :)

@devquen37 7 ай бұрын

Could you please clarify if there would be any warnings from ReactJS regarding the potential duplication of keys in the following scenario? return {data.map(({ id }) => ()) } {data.map(({ id }) => ()) }

@developerwaypatterns 7 ай бұрын

There won't be duplication in this case. Keys work only among their siblings, in this case within the local dynamic arrays. That's the case of an array inside an array

@dmtrack 3 ай бұрын

brilliant ❤ I’m watching it after reading particular part of your book. Thank you very much! Is there any possibilities to support your work ?

@developerwaypatterns 3 ай бұрын

Buying the book and spreading the word about it is a great support! ❤️

@dineshreddy8915 Ай бұрын

👍🙌

@davidllanes1019 7 ай бұрын

This is an excellent series. I hope I was able to watch these videos when I was learning react. And you are right, this is enough to understand how react manages changes in the screen, there is no need to go deeper and learn how react reconciler algorithm works (react fiber, though is pretty interesting). Please take your time to follow this series, it’s awesome and helps you A LOT when working on a real application and trying to figure out bugs.

@mattlewandowski8299 7 ай бұрын

This was explained so well. I loved the progression of the explanation as you tied things together. Even just setting up a baseline with the rerender cats, before you start using them in your examples. Thanks a lot!