Please continue creating these kinds of video, This really helps to understand the core React Concepts and getting a vast amount of knowledge from the core. Thank you.
Great video. Wish you had spoken about performance a bit more. The fact that suspense is mentioned gives a hint to users like me...but I would have to dig in separately
Excellent presentation my friend. I was hoping that there might be some general detail about the JS logic of how the buffer switches the pointer. Also, do the variables actually change position in the array [ currentX, setCurrentX ] ? Maybe this might be a topic for another video? Many thanks.
Hi Philip, your this "How does React actually work" playlist is really informative. Thanks for the playlist, I learned new things about React. I have 1 doubt and would really appreciate if you could answer, when you use term "Fiber Tree" and discuss that there will be 2 trees (Current Tree & Work In Progress Tree) , is it a replacement of Real DOM & Virtual DOM concept in newer versions of React? Or is it something else? My understanding was, there is Real DOM and Virtual DOM, React make changes to Virtual DOM on state change and compares updated Virtual DOM with the snapshot of Virtual DOM before update, then it updates that new component on Real DOM. Virtual DOM is not displayed on screen. But in Fiber Tree concept, you said that 2 trees will keep swapping, so if they are being displayed, that means current Tree will act like Real DOM with all content and work In Progress Tree will act like Virtual DOM which would be lightweight copy of currentTree. But because work In Progress Tree will eventually become current Tree, that means it is NOT a lightweight copy, it is an actual thing, right? And is Fiber Tree related to Real & Virtual DOM or is it something else? I got a little confused about Fiber Tree concept and how it will fit in Real and Virtual DOM concept. 😅
The Real / Virtual DOM and the Fiber tree are 2 different things. While the Fiber tree really is the foundation of React (Fiber tree is being used behind the scenes), Virtual DOM is more of a programming concept or a pattern.
@@PhilipFabianek Thanks a lot, I finally got it! 😄 Even in React docs, it is written, that fibers can be considered part of Virtual DOM. "React, however, also uses internal objects called “fibers” to hold additional information about the component tree. They may also be considered a part of “virtual DOM” implementation in React." Thanks again, I really learned a lot from your playlist. Subscribed 😎
wow,it's absolutely a really helpful video, and i just have one question for another asepect, how could you learn the deep dive knowledge about react, could you share the way you learn it?
In terms of React Fiber, I would suggest reading this article: indepth.dev/posts/1008/inside-fiber-in-depth-overview-of-the-new-reconciliation-algorithm-in-react
wow, it's really good explanations in the video, but I still got so many confusions in learning React fiber because this is my first time to learn it. My dear video author, can you tell me there is some other good resources to learn about it?
@@PhilipFabianek so the changes made to the fiber tree based on user events and state updates are then applied to virtual DOM and the diffing algorithm is run and DOM is updated and then the screen renders. Please correct me if iam thinking wrong
In summary, the virtual DOM tree is a JavaScript representation of the HTML structure used by React for efficient diffing and patching operations. The fiber tree, on the other hand, is a more complex data structure that organizes components and their virtual DOM nodes, allowing React to efficiently schedule and perform updates based on their priority. Together, they enable React to efficiently update the actual DOM while minimizing unnecessary operations.
Well I actually talked about both of the trees in my videos. About the first one (virtual DOM tree) in React.js Deep Dive #1 and about the second one (Fiber tree) in React.js Deep Dive #2
@@VKY-XLR8 In summary, the virtual DOM tree is a JavaScript representation of the HTML structure used by React for efficient diffing and patching operations. The fiber tree, on the other hand, is a more complex data structure that organizes components and their virtual DOM nodes, allowing React to efficiently schedule and perform updates based on their priority. Together, they enable React to efficiently update the actual DOM while minimizing unnecessary operations.
I started programing on this year Feb 2022 and I not have CS degree ,do you any Suggestion for me . I learn html , css , js , react . know I am reading react docs . I want to get deep in react. Is this right for me now ? Thank you for your videos
If you want to work as a frontend developer, those technologies are definitely right for you. It is also important to not just learn, but to also work on a lot of projects.
This video is quite technical and assumes some knowledge of React. Perhaps you could watch the previous video at ruclips.net/video/7YhdqIR2Yzo/видео.html, which should be more accessible
This is the best explanation of Fiber and how react works itself! Thank you so much for your work!
I wish I had a lecturer like you, I hope these videos will continue. Thanks for sharing your knowledge in such a detailed and understandable way.
Thank you for watching!
简直太棒了，每个视频我都要看三遍以上，太喜欢你的解读方式了，希望能多出一些讲解视频！
This channel is really underrated, great work!
Thank you very much!
Please continue creating these kinds of video, This really helps to understand the core React Concepts and getting a vast amount of knowledge from the core. Thank you.
I like your clear and concise explanation of React Fiber and this ambient music on the background :)
Thank you
this is literally very under-rated channel , this is outstanding explanation of this much of complicated topic. thanks @philip keep up the good work.
Thank you very much!
Thank you very much for the detailed explanation. Please make more videos like this.
Fantastic explanation detailing React Fiber-very helpful! Please continue creating this kind of video content.
Incredibly useful! One of the best explanations of fiber that i've seen.
Background music is really pacifying and non-interruptive. Thanks for explaining, good sir.
Thank you for the feedback!
This series is top notch. I would like to send you a kofi or something in appreciation.
Thank you! If you want to support me, I do actually have a Kofi account at ko-fi.com/philipfabianek
Thank you. Your video is concise and very to-the-point. You've done a great job making it.
Thank you!
Great video. Wish you had spoken about performance a bit more. The fact that suspense is mentioned gives a hint to users like me...but I would have to dig in separately
Thank you very much. It's a very good Fiber explanation.
Excellent presentation my friend. I was hoping that there might be some general detail about the JS logic of how the buffer switches the pointer. Also, do the variables actually change position in the array [ currentX, setCurrentX ] ? Maybe this might be a topic for another video? Many thanks.
The animation made it understandable. Good job 👌
Thank you!
I was going to ask if we can work with the fiber directly.
It is possibe but there is no reason to do so, because Fiber is just the internal part of React after all.
Please continue with tis content, it's so good
The English is a little bit clunky, but the quality of the knowledge and the presentation is extraordinary. Keep up the good work!
Thank you!
Very very goood man! I'm waiting for a video about hooks behind the scenes!
Thank you! I'm currently working on the video about React Hooks
I came in search of silver but I found gold, thanks
Thank you SOOOO MUCH! Awesome work!
I should know your channel early, great work! Thanks.
Best ever explanation about fiber. Thanks!
Thank you!
Awesome videos!!! I am so lucky when finding out your channel, your videos are very interesting and helpful! Thanks so much man!
Awesome, thank you!
Wow, you've made it so simple thx.
clear & comprehensive video🥰
Thank you!
This is really outstanding work!
Very usefull and clear video, thank you!
Hi Philip, your this "How does React actually work" playlist is really informative. Thanks for the playlist, I learned new things about React.
I have 1 doubt and would really appreciate if you could answer, when you use term "Fiber Tree" and discuss that there will be 2 trees (Current Tree & Work In Progress Tree) , is it a replacement of Real DOM & Virtual DOM concept in newer versions of React? Or is it something else?
My understanding was, there is Real DOM and Virtual DOM, React make changes to Virtual DOM on state change and compares updated Virtual DOM with the snapshot of Virtual DOM before update, then it updates that new component on Real DOM. Virtual DOM is not displayed on screen.
But in Fiber Tree concept, you said that 2 trees will keep swapping, so if they are being displayed, that means current Tree will act like Real DOM with all content and work In Progress Tree will act like Virtual DOM which would be lightweight copy of currentTree. But because work In Progress Tree will eventually become current Tree, that means it is NOT a lightweight copy, it is an actual thing, right?
And is Fiber Tree related to Real & Virtual DOM or is it something else?
I got a little confused about Fiber Tree concept and how it will fit in Real and Virtual DOM concept. 😅
The Real / Virtual DOM and the Fiber tree are 2 different things. While the Fiber tree really is the foundation of React (Fiber tree is being used behind the scenes), Virtual DOM is more of a programming concept or a pattern.
@@PhilipFabianek Thanks a lot, I finally got it! 😄
Even in React docs, it is written, that fibers can be considered part of Virtual DOM.
"React, however, also uses internal objects called “fibers” to hold additional information about the component tree. They may also be considered a part of “virtual DOM” implementation in React."
Thanks again, I really learned a lot from your playlist. Subscribed 😎
Great work on this video! Very informative, thank you!
very informative video 👍
Your videos need to be added to the new beta docs
Wooah. Superb explanation, keep it up dude, I learned a lot from you videos. Thanks you and will subscribe immediately!
Thank you!
This is amazing content.
Hey thanks for really good animation. Quite easy to understand :D
Thank you!
This is incredible content.
I got confused about Virtual Tree vs Fiber Three. Is is same? Is fiber next version of reconciliation or it's different?
Great job!
Great explanation, but need analogy with virtual dom.
Thank you!
wow,it's absolutely a really helpful video, and i just have one question for another asepect, how could you learn the deep dive knowledge about react, could you share the way you learn it?
In terms of React Fiber, I would suggest reading this article: indepth.dev/posts/1008/inside-fiber-in-depth-overview-of-the-new-reconciliation-algorithm-in-react
Please create more videos!!
讲的太好了，thanks
Awesome video 🙌🏼
Thank you!
man you are amazing
thanks for the video!
Is the algorithm used to walk down the tree a DFS?
Not sure it is precisely DFS but React definitely goes through the tree in a DFS manner
Thank you!
Nice informative video
Thank you!
wow, it's really good explanations in the video, but I still got so many confusions in learning React fiber because this is my first time to learn it. My dear video author, can you tell me there is some other good resources to learn about it?
blog.logrocket.com/deep-dive-react-fiber/
indepth.dev/posts/1008/inside-fiber-in-depth-overview-of-the-new-reconciliation-algorithm-in-react
@@PhilipFabianek Oh, thank you, I really appreciate it
please create more videos!!!
thanks for sharing
Thanks for watching!
nice!
Thank you!
Is fiber tree == virtual Dom?
No, they are not
@@PhilipFabianek so the changes made to the fiber tree based on user events and state updates are then applied to virtual DOM and the diffing algorithm is run and DOM is updated and then the screen renders.
Please correct me if iam thinking wrong
In summary, the virtual DOM tree is a JavaScript representation of the HTML structure used by React for efficient diffing and patching operations. The fiber tree, on the other hand, is a more complex data structure that organizes components and their virtual DOM nodes, allowing React to efficiently schedule and perform updates based on their priority. Together, they enable React to efficiently update the actual DOM while minimizing unnecessary operations.
React fiber tree IS virtual DOM?
No, they are two different trees
@@PhilipFabianek love the way that u reply to questions, highly appreciated.
May I ask where can I find the answers to the question..
Well I actually talked about both of the trees in my videos. About the first one (virtual DOM tree) in React.js Deep Dive #1 and about the second one (Fiber tree) in React.js Deep Dive #2
@@PhilipFabianek will check them, thank you :)
@@VKY-XLR8 In summary, the virtual DOM tree is a JavaScript representation of the HTML structure used by React for efficient diffing and patching operations. The fiber tree, on the other hand, is a more complex data structure that organizes components and their virtual DOM nodes, allowing React to efficiently schedule and perform updates based on their priority. Together, they enable React to efficiently update the actual DOM while minimizing unnecessary operations.
I started programing on this year Feb 2022 and I not have CS degree ,do you any Suggestion for me . I learn html , css , js , react .
know I am reading react docs . I want to get deep in react. Is this right for me now ?
Thank you for your videos
If you want to work as a frontend developer, those technologies are definitely right for you. It is also important to not just learn, but to also work on a lot of projects.
@@PhilipFabianek thank you
Use 1.25 speed, thank me later. Btw nice video!
maybe you should look into the way you make videos. I watched the video and i could listen to the words but could not understand a thing you said
This video is quite technical and assumes some knowledge of React. Perhaps you could watch the previous video at ruclips.net/video/7YhdqIR2Yzo/видео.html, which should be more accessible
thanks