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.
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.
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]
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!
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
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🎉.
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 ?
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.
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 }) => ()) }
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
ruclips.net/video/cyAbjx0mfKM/видео.html 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.
Great work! This channel should be mentioned in react docs for sure 😊
Thank you! 😊
Your way of teaching and content feels highly sophisticated.
Perfect explanation. I will share all videos with my Team, this is gold !!!
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.
Thank you ☺️🥰
so far best react course for in-depth knowledge
you should do a complete react (video) course! love your videos. Keep it up
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.
Coding example along with code are easier to understand and follow. Thanks!!
After two years using react, I now understand the origin of many of the bugs I have dealt with, thank you very much for sharing your knowledge.
Happy to hear the videos are useful! 😊
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]
Ooops! Indeed 🤦🏼♀🤦🏼♀ Great catch!
What an incredibly high quality video! Learned so much and my intuition for react got a lot sharper
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!
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
Thank you! 😊
You have the best courses.
Thank you! 😊
The best blogger ever! I want your next.js course to watch next
Big heart for this! Watching as the first thing in the morning. It helps to stick after read the chapter in your book. So 🎉
Awesome, glad it works! 😊
Great video covering all the intricate details . Thank you so much . Keep growing 🎉
Insanely clear and easy to follow. Great video!
Thank you! 😊
Great job on the video! It's clear a lot of effort went into it. Keep up the good work, Nadia!
best videos about reactjs
Thanks for this info, is the best advance info that i found, your book got me a level up with react.
OMG, this is really awesome. Thanks for all the efforts!!
thank you so much, this explanation clearerd my doubts
Another excellent video, so good I watched it twice... love you and your videos
20/10 videos. Thanks for everything :)
amazing work, thanks
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
Thank you! 😊
you should be on react team
Amazing tutorial, thanks
Thank you
perfect! thanks for sharing!
amazing video, thank you very much
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?
Not exactly about useEffect, but there will be a video on data fetching, which includes useEffect
brilliant ❤ I’m watching it after reading particular part of your book. Thank you very much! Is there any possibilities to support your work ?
Buying the book and spreading the word about it is a great support! ❤️
Thank you so much FOR UPLOADIG
this is amazing tons of informations thanks 😮
Amazing video as usual!
Are you going to go over react server components? Excellent videos btw! 👏
Thank you! 😊
I probably will, but not very soon.
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🎉.
happy birthday!
Happy birthday🎉🎉🎉
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 ?
Can you post a link to this code in something like codesandbox? A bit hard to answer without seeing the behaviour
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.
Yep, it's the same, I just slightly prefer the explicit version rather than &&, for me it's easier to read :)
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 }) => ()) }
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
@7:06 what do you mean by objects are created locally
The element before and after re-render. Elements are covered in the second video of this series, it explains them in more detail
👍🙌
I can't count the cats. if I start counting, I might miss something important.😅
Cats are important too! 😅
ruclips.net/video/cyAbjx0mfKM/видео.html 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.
Yep!