Great content! I think this is the only video available in youtube that talks about the React principle and at the same time is friendly to beginners. Keep up the good work. The video serves really well for people who wanna dive into the source code of React while have no idea where to start.
It is the greatest explanation I have seen! I say it, as I have just kind of ended self-learning JavaScript and was wondering about React.js's hard-mode. It is good that you show it like that, because when I have seen the other's 'let's create-react-app' and so on, I just felt as if I forgot all I knew! I have to switch, due to war. Even my 2 diplomas are just for fun. That is where English and German are useful. Thank you, Philip! My best friend lives in Prague since 2008. He helps me in learning, but I couldn't have understood React, even with his help! You have helped! Great
Awesome explanation with one caveat at 7:30. The diffing algorithm has a complexity of _O(n)_ which does *not* mean that the number operations will be smaller than (n). Instead it means that the number of operations will be (
Your channel is a work of art.I'm new to your channel.I've been learning Reactjs for about like 4 months and i was looking for like how React works behind the scenes .Your channel is a masterpiece.Thank you so much.Can we expect like Nextjs series Deep dive series if you have times sir?Thank you....
Great video series! Very much needed :) One thing I'd love to understand a bit better is component instances. What is the relationship between elements and instances? Where does React keep its references to the component instances? In the element tree somewhere? The 'ref'?
The relationship between React elements (the ones that have the function type which returns the nested elements) and instances is 1-to-1. For each element that describes a component, there exists a component instance. About the second question: Instances exist in memory. We as React developers can access class instances using the 'this' keyword or lifecycle methods. This works because an instance of a class component is an actual instance of the class afterall. We can access functional component instances using React hooks. We can also create refs. What you are asking is how does React access them or how are they stored internally. The answer is that this is 1 level below what we are talking about. It has a lot to do with React Fiber, which I covered in the next episode of this deep dive (ruclips.net/video/0ympFIwQFJw/видео.html). Fibers keep actual references to component instances in the 'stateNode' property. I think this answer on Stack Overflow is what you are looking for: stackoverflow.com/a/58968770/8699608 The function in the answer can retrieve the component instance from the actual element in the DOM.
That is a good question. I was also using React for several years before learning how it actually works. I think it gives one some satisfaction to have a rough idea of how the technology that is being used works. Additionally, I think there are some practical takeaways, for example knowing how keys work and why they are important, etc.
I agree there is some satisfaction that I felt. And yes absolutely the thing with the keys is very important. I actually looked up some of my code and I found out I used the key incorectly: I used index as key 😱 {sectionsData.map((section, index) => ( ... ))} But I guess this would be much more efficient (if the sectionsData changes like things get prepended for example): {sectionsData.map((section, index) => ( ... ))} But do I really need to understand how the diff function works in order to apply that knowledge? I also could have just read this react documentation: Keys tell React which array item each component corresponds to, so that it can match them up later. This becomes important if your array items can move (e.g. due to sorting), get inserted, or get deleted. A well-chosen key helps React infer what exactly has happened, and make the correct updates to the DOM tree. Rather than generating keys on the fly, you should include them in your data: Pitfall You might be tempted to use an item’s index in the array as its key. In fact, that’s what React will use if you don’t specify a key at all. But the order in which you render items will change over time if an item is inserted, deleted, or if the array gets reordered. Index as a key often leads to subtle and confusing bugs. Similarly, do not generate keys on the fly, e.g. with key={Math.random()}. This will cause keys to never match up between renders, leading to all your components and DOM being recreated every time. Not only is this slow, but it will also lose any user input inside the list items. Instead, use a stable ID based on the data. Note that your components won’t receive key as a prop. It’s only used as a hint by React itself. If your component needs an ID, you have to pass it as a separate prop: . Source: react.dev/learn/rendering-lists Anyway now I started learning flutter and I wonder if flutter Widgets rendered as lists also need keys? I did some research and you can also provide keys in flutter to optimise re-rendering: www.flutterclutter.dev/flutter/tutorials/2023-04-08-how-to-use-keys/ But I think if I had read the react docs instead of understanding how this Diff function in react works I wouldn't have also assumed that in flutter there is a similar thing. So I don't understand how that knowledge of the react Diffing algorithm helps me. So maybe if you are trying to learn a similar but different technology maybe if you understand it in depth how the first technology works under the hood it may be helpful or may not? And I guess for static lists that don't change it's unnecessary to add keys. That's something I wouldn't have known if I wouldn't understand how the Diffing function in react works. So to summarise it is useful to have this deep knowledge for optimising and that knowledge can also be mapped to different technologies? Did I miss something? I still am not satisfied with my own answer. By the way if you could start learning React from beginning like someone would erase your memories and you would time travel in the past would you first just learn to "use" react for couple weeks and then start look into how it works under the hood or the other way around? @@PhilipFabianek
I agree there is some satisfaction that I felt. And yes absolutely the thing with the keys is very important. I actually looked up some of my code and I found out I used the key incorectly: I used index as key 😱 {sectionsData.map((section, index) => ( ... ))} But I guess this would be much more efficient and avoid some bugs: {sectionsData.map((section, index) => ( ... ))} But do I really need to understand how the diff function works in order to apply that knowledge? I also could have just read this react documentation: Keys tell React which array item each component corresponds to, so that it can match them up later. This becomes important if your array items can move (e.g. due to sorting), get inserted, or get deleted. A well-chosen key helps React infer what exactly has happened, and make the correct updates to the DOM tree. Rather than generating keys on the fly, you should include them in your data: Pitfall You might be tempted to use an item’s index in the array as its key. In fact, that’s what React will use if you don’t specify a key at all. But the order in which you render items will change over time if an item is inserted, deleted, or if the array gets reordered. Index as a key often leads to subtle and confusing bugs. Similarly, do not generate keys on the fly, e.g. with key={Math.random()}. This will cause keys to never match up between renders, leading to all your components and DOM being recreated every time. Not only is this slow, but it will also lose any user input inside the list items. Instead, use a stable ID based on the data. Note that your components won’t receive key as a prop. It’s only used as a hint by React itself. If your component needs an ID, you have to pass it as a separate prop: . Source: react.dev/learn/rendering-lists @@PhilipFabianek
00:00 Understanding the basics of React 01:50 A React component is a class or function that outputs an element tree. 03:44 React elements, components, and instances 05:42 React uses a virtual DOM to efficiently update the real DOM 07:38 React's Diffing algorithm relies on two important assumptions 09:33 React's reconciliation algorithm explained 11:30 React renderers generate and insert elements during reconciliation. 13:25 React communicates with renderers using dispatchers.
Philip this was awesome. I have been an educator for over 15 years and love watching others present information. Your use of the calming background music, imagery, and the pace of your voice definitely put my mind in a place to absorb the content easily. Please continue to bring us more information. Instantly subscribed!!!
I have worked as a React developer for four years and I never understood why you have to import React and neither why you can't use the index as a key. Very good and clear explanations. I will have an interview for a React job on monday and this definitely helps me! Thank you! 😃
Have to say bunch of words about this video but not have much time to do it. You did a great job that I can't explain. Keep it up your great work. Have subscribed your Channel 👍
Hi about List key, i think maybe in some occasions, for example a paginated list with same size of elements in every page, use index its not a bad idea because you can optimize number of mounts. If you use id the react mount and rerender but if you use index the only that algorithm can check its that are differents props so only re-render. Obviously depends on the situation, what do you think about this?
Assuming the list is paginated after the indexes are generated and the order of items doesn't change, using indexes as keys shouldn't lead to any bugs, but I don't understand how would using ids as keys be slower. It is also a good practise to use id as a key, because if in the future you implemented sorting or maybe filtering, your application would suddenly be buggy.
Great video! Very comprehensive material But at 10:40 you mentioned that two first items will be unmounted because there will be new inserted before the first one But neither type nor key have changed. Only children have changed. So I guess they won't be unmounted, but their props will be changed
Thank you. Thank you very much for this video. I myself tried to dive into how react works. But I got stuck into the part where it's also mentioned in React docs that creating React element is less costier as compared to DoM elements as they are plain JS object. But I'm not able to understand this in depth why is it so. So it would be great help if you or anyone reading this can point me to some reference to this answer.
First it is important to understand that DOM manipulations are expensive (medium.com/technogise/dom-manipulation-in-browser-59b793bee559 may help you). What is probably confusing you is that React also creates DOM elements. So why is React more efficient? Because React uses the diffing algorithm. It therefore always figures out the most efficient way to mutate the DOM tree.
Thank you very much, I was wondering how react native was possible, but you elegantly explained that react is not a platform specific, and it does not actually render to HTML without another separate library 11:22.
Thank you for your videos, those information are not easy to find on RUclips because in general people explain only how to use things without explaining it
I wasn't expecting the background music. Probably the first coding tutorial with music. Worked like magic. Thank you :)
Great content! I think this is the only video available in youtube that talks about the React principle and at the same time is friendly to beginners. Keep up the good work. The video serves really well for people who wanna dive into the source code of React while have no idea where to start.
Thank you!
It is the greatest explanation I have seen! I say it, as I have just kind of ended self-learning JavaScript and was wondering about React.js's hard-mode. It is good that you show it like that, because when I have seen the other's 'let's create-react-app' and so on, I just felt as if I forgot all I knew!
I have to switch, due to war. Even my 2 diplomas are just for fun. That is where English and German are useful.
Thank you, Philip! My best friend lives in Prague since 2008. He helps me in learning, but I couldn't have understood React, even with his help! You have helped! Great
Thank you!
great video Philip! Keep rocking
Awesome explanation with one caveat at 7:30. The diffing algorithm has a complexity of _O(n)_ which does *not* mean that the number operations will be smaller than (n). Instead it means that the number of operations will be (
Yes you are correct.
Your channel is a work of art.I'm new to your channel.I've been learning Reactjs for about like 4 months and i was looking for like how React works behind the scenes .Your channel is a masterpiece.Thank you so much.Can we expect like Nextjs series Deep dive series if you have times sir?Thank you....
actully this one of the greatest videos about react. thanks for this amazing content , can't wait to see more.
The Best 'React Under the Hood' explanation!!
Thank you!
omg, much of information in the video killed confusions, really helped a lot.❤❤❤
Brilliant content. World-class content. Keep it up Philip, it's amazing.
Thank you, much appreciated!
Super awesome & fantastic lessons, rarely encounter such a deep dive React tutorial on RUclips.
Thank you very much!
Loving this DEFFING ALGORITHM. Thanks mate
Best content! clear and concise, I've never seen. thanks for your sharing!
Thank you very much!
Thank you... Really informative 👍
Great video series! Very much needed :) One thing I'd love to understand a bit better is component instances. What is the relationship between elements and instances? Where does React keep its references to the component instances? In the element tree somewhere? The 'ref'?
The relationship between React elements (the ones that have the function type which returns the nested elements) and instances is 1-to-1. For each element that describes a component, there exists a component instance.
About the second question: Instances exist in memory. We as React developers can access class instances using the 'this' keyword or lifecycle methods. This works because an instance of a class component is an actual instance of the class afterall. We can access functional component instances using React hooks. We can also create refs.
What you are asking is how does React access them or how are they stored internally. The answer is that this is 1 level below what we are talking about. It has a lot to do with React Fiber, which I covered in the next episode of this deep dive (ruclips.net/video/0ympFIwQFJw/видео.html). Fibers keep actual references to component instances in the 'stateNode' property. I think this answer on Stack Overflow is what you are looking for: stackoverflow.com/a/58968770/8699608 The function in the answer can retrieve the component instance from the actual element in the DOM.
Awesome. Keep up the good work
Subscribed!
More React internals content please!!
Thank you Philip, you cleared a lot of my confusions :))
Amazing! Tks for share.
Great work. Thank you for the detailed explanation 💜
very informative video. Thanks
Philip's slavic pronunciation allows me to understand everything what he says
Wow man what an explanation.... No one taught me like this🤗🤗 thank you
Thank you brother 🙏🙏
Great content
Great Video
Great🙌
AMAZING CONTENT!
Thank you!
How are you printing out the virtual DOM of your app like you do at @6:53?
I simply log it to the console like I did previously in the video.
@@PhilipFabianek ahh thank you!
Great info. The vocal delivery does make me drowsy though. 😪 :)
Thank you for watching! I am working on it 🙂
Their is a function named "lifecycle", i wonder what these team was thinking
Awesome !
Thank you!
And how does this deep knowledge improve my skills as a react developer? I managed to successfully use react for many projects without this knowledge.
That is a good question. I was also using React for several years before learning how it actually works. I think it gives one some satisfaction to have a rough idea of how the technology that is being used works. Additionally, I think there are some practical takeaways, for example knowing how keys work and why they are important, etc.
I agree there is some satisfaction that I felt. And yes absolutely the thing with the keys is very important. I actually looked up some of my code and I found out I used the key incorectly:
I used index as key 😱
{sectionsData.map((section, index) => (
...
))}
But I guess this would be much more efficient (if the sectionsData changes like things get prepended for example):
{sectionsData.map((section, index) => (
...
))}
But do I really need to understand how the diff function works in order to apply that knowledge?
I also could have just read this react documentation:
Keys tell React which array item each component corresponds to, so that it can match them up later. This becomes important if your array items can move (e.g. due to sorting), get inserted, or get deleted. A well-chosen key helps React infer what exactly has happened, and make the correct updates to the DOM tree.
Rather than generating keys on the fly, you should include them in your data:
Pitfall
You might be tempted to use an item’s index in the array as its key. In fact, that’s what React will use if you don’t specify a key at all. But the order in which you render items will change over time if an item is inserted, deleted, or if the array gets reordered. Index as a key often leads to subtle and confusing bugs.
Similarly, do not generate keys on the fly, e.g. with key={Math.random()}. This will cause keys to never match up between renders, leading to all your components and DOM being recreated every time. Not only is this slow, but it will also lose any user input inside the list items. Instead, use a stable ID based on the data.
Note that your components won’t receive key as a prop. It’s only used as a hint by React itself. If your component needs an ID, you have to pass it as a separate prop: .
Source: react.dev/learn/rendering-lists
Anyway now I started learning flutter and I wonder if flutter Widgets rendered as lists also need keys?
I did some research and you can also provide keys in flutter to optimise re-rendering: www.flutterclutter.dev/flutter/tutorials/2023-04-08-how-to-use-keys/
But I think if I had read the react docs instead of understanding how this Diff function in react works I wouldn't have also assumed that in flutter there is a similar thing. So I don't understand how that knowledge of the react Diffing algorithm helps me.
So maybe if you are trying to learn a similar but different technology maybe if you understand it in depth how the first technology works under the hood it may be helpful or may not?
And I guess for static lists that don't change it's unnecessary to add keys. That's something I wouldn't have known if I wouldn't understand how the Diffing function in react works.
So to summarise it is useful to have this deep knowledge for optimising and that knowledge can also be mapped to different technologies?
Did I miss something? I still am not satisfied with my own answer.
By the way if you could start learning React from beginning like someone would erase your memories and you would time travel in the past would you first just learn to "use" react for couple weeks and then start look into how it works under the hood or the other way around?
@@PhilipFabianek
I agree there is some satisfaction that I felt. And yes absolutely the thing with the keys is very important. I actually looked up some of my code and I found out I used the key incorectly:
I used index as key 😱
{sectionsData.map((section, index) => (
...
))}
But I guess this would be much more efficient and avoid some bugs:
{sectionsData.map((section, index) => (
...
))}
But do I really need to understand how the diff function works in order to apply that knowledge?
I also could have just read this react documentation:
Keys tell React which array item each component corresponds to, so that it can match them up later. This becomes important if your array items can move (e.g. due to sorting), get inserted, or get deleted. A well-chosen key helps React infer what exactly has happened, and make the correct updates to the DOM tree.
Rather than generating keys on the fly, you should include them in your data:
Pitfall
You might be tempted to use an item’s index in the array as its key. In fact, that’s what React will use if you don’t specify a key at all. But the order in which you render items will change over time if an item is inserted, deleted, or if the array gets reordered. Index as a key often leads to subtle and confusing bugs.
Similarly, do not generate keys on the fly, e.g. with key={Math.random()}. This will cause keys to never match up between renders, leading to all your components and DOM being recreated every time. Not only is this slow, but it will also lose any user input inside the list items. Instead, use a stable ID based on the data.
Note that your components won’t receive key as a prop. It’s only used as a hint by React itself. If your component needs an ID, you have to pass it as a separate prop: .
Source: react.dev/learn/rendering-lists
@@PhilipFabianek
@@Stefan-xm9qb Filling in knowledge gaps is important. Gives you more tools to solve complex problems.
This video made me realize that I'm standing on the shoulders of giants whenever I'm developing in React. Facebook devs are magicians
00:00 Understanding the basics of React
01:50 A React component is a class or function that outputs an element tree.
03:44 React elements, components, and instances
05:42 React uses a virtual DOM to efficiently update the real DOM
07:38 React's Diffing algorithm relies on two important assumptions
09:33 React's reconciliation algorithm explained
11:30 React renderers generate and insert elements during reconciliation.
13:25 React communicates with renderers using dispatchers.
We don't need to import React now while working with JSX. What changed?
Correct! it is misassumption!
Philip this was awesome. I have been an educator for over 15 years and love watching others present information. Your use of the calming background music, imagery, and the pace of your voice definitely put my mind in a place to absorb the content easily. Please continue to bring us more information. Instantly subscribed!!!
Thank you!
It's so smooth I just replayed the video to check the music 😅
Before this, I was working BLINDLY on React and any other library or framework that is out their. This very content opened my EYES 👀.
Nice. Where have you been?. Hope you r doing well. Do some videos once in a while if possible
Nice video I learnend new things thank you man
Thanks for your efforts, if you can just remove the music it will be great.thanks again.
amazing content but maybe remove the background sound or reduce the volume jst a request :)
Great video , thanks brother it helped alot to understand react better.
I have worked as a React developer for four years and I never understood why you have to import React and neither why you can't use the index as a key. Very good and clear explanations. I will have an interview for a React job on monday and this definitely helps me! Thank you! 😃
Have to say bunch of words about this video but not have much time to do it. You did a great job that I can't explain. Keep it up your great work. Have subscribed your Channel 👍
Thank you!
Great Video!
Hi about List key, i think maybe in some occasions, for example a paginated list with same size of elements in every page, use index its not a bad idea because you can optimize number of mounts. If you use id the react mount and rerender but if you use index the only that algorithm can check its that are differents props so only re-render. Obviously depends on the situation, what do you think about this?
Assuming the list is paginated after the indexes are generated and the order of items doesn't change, using indexes as keys shouldn't lead to any bugs, but I don't understand how would using ids as keys be slower. It is also a good practise to use id as a key, because if in the future you implemented sorting or maybe filtering, your application would suddenly be buggy.
wohh what a informative video. Just great!!!!. I dont Know why you stopped making videos but you should make more videos/
Thank you, I am currently very busy but there will be videos in the future
great job. very good info in a short time.
Thank you!
Thank you for this video it was very helpful.
Awsome work ! keep going this !
Great content. Only thing the BGM is kinda distracting.
great explanation. Thanks so much
This explanation can be understood by a 5 year old as well! Genius!!!
Thank you
awsome video thanx from south korea!!
Amazing explanation for such a complex subject!!!
Thank you
Thanks for this info. I have learned a lot. Soon, I will explain it to new learners in much detail. Thanks
11:25 can some one name other examples of ' and so on' in 2nd point...also what is 'platform specific' ?
Take a look here: github.com/facebook/react/tree/main/packages/react/src
how amazing you are, can i proposal a video about how SSR in Nextjs work ?
Thank you for watching! I will consider making a video about that in the future.
amazing content! still watching in 2023
This is really awesome content .
I've switched from Angular to React. This video is very helpful. Thank you for sharing your knowledge ;)
Thanks
great video! I love the 3blue1brown kinda style applied to programming.
Thank you very much! I have watched quite a few videos from 3b1b and they had an impact on me.
Great video! Very comprehensive material
But at 10:40 you mentioned that two first items will be unmounted because there will be new inserted before the first one
But neither type nor key have changed. Only children have changed. So I guess they won't be unmounted, but their props will be changed
excellent work! thanks!
This is gold stuff, I believe it not available any where.
Please bring more videos like this
music ruined it
Great video! Thank you
incredible explanation!
great topic, thanks
Fantastic, and great music
premium level content bro !
Thank you, now I can understand more about react
Thank you!
Nice brief high-level overview of the source code and core deep fundamentals
You are a damn smart man!
great explanation!!!!
15 mins of pure beauty, thanks a lot
Thank you!
Thank you. Thank you very much for this video. I myself tried to dive into how react works. But I got stuck into the part where it's also mentioned in React docs that creating React element is less costier as compared to DoM elements as they are plain JS object. But I'm not able to understand this in depth why is it so. So it would be great help if you or anyone reading this can point me to some reference to this answer.
First it is important to understand that DOM manipulations are expensive (medium.com/technogise/dom-manipulation-in-browser-59b793bee559 may help you). What is probably confusing you is that React also creates DOM elements. So why is React more efficient? Because React uses the diffing algorithm. It therefore always figures out the most efficient way to mutate the DOM tree.
One of the best videos for those who want to dive deep into the React and the source code.
This is amazing, I checked lots of times if I have already pressed like during watching this, thank you!
Thank you for the amazing video, now I have a better understanding of React
This is so great. The explain is very simple and clear. Thanks author, you make my days much easier and saved my time.
Thank you!
Finally! I've been looking for this series for the past week. Great stuff Philip 😁
Thank you very much, I was wondering how react native was possible, but you elegantly explained that react is not a platform specific, and it does not actually render to HTML without another separate library 11:22.
Thank you for your videos, those information are not easy to find on RUclips because in general people explain only how to use things without explaining it
Good video, thnks!
appreciated a lot
Awesome content!!
Great content!
Man, thank you so much for this video. I finally understand React
This is pure gold
this is gold
Nice video !!! 👏
This video deserves million views.
Wow thanks.
This is gold
Thank you very much!
woooahhh! amazingg
Man you rock. So cool explanation!
Thank you!
You are good man