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.
When state is true the create element is call for Input and when state change to false , we have another createElement , why Input's have same reference?
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! 😊
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 ☺️🥰
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.
Your way of teaching and content feels highly sophisticated.
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!
so far best react course for in-depth knowledge
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!
Coding example along with code are easier to understand and follow. Thanks!!
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! 😊
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! 😊
The best blogger ever! I want your next.js course to watch next
20/10 videos. Thanks for everything :)
Great job on the video! It's clear a lot of effort went into it. Keep up the good work, Nadia!
You have the best courses.
Thank you! 😊
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 🎉
Thanks for this info, is the best advance info that i found, your book got me a level up with react.
Insanely clear and easy to follow. Great video!
Thank you! 😊
OMG, this is really awesome. Thanks for all the efforts!!
Another excellent video, so good I watched it twice... love you and your videos
amazing work, thanks
best videos about reactjs
thank you so much, this explanation clearerd my doubts
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! 😊
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🎉.
Amazing video as usual!
Amazing tutorial, thanks
this is amazing tons of informations thanks 😮
amazing video, thank you very much
you should be on react team
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
perfect! thanks for sharing!
Thank you
Thank you so much FOR UPLOADIG
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
happy birthday!
@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
Happy birthday🎉🎉🎉
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! ❤️
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 :)
Are you going to go over react server components? Excellent videos btw! 👏
Thank you! 😊
I probably will, but not very soon.
When state is true the create element is call for Input and when state change to false , we have another createElement , why Input's have same reference?
Can you link the slide you're referring to? This episode is quite large and covers a lot :)
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.
Yep!
👍🙌
I can't count the cats. if I start counting, I might miss something important.😅
Cats are important too! 😅