What Is React Fiber? React.js Deep Dive #2
ฝัง
- เผยแพร่เมื่อ 25 มิ.ย. 2024
- In this video, we will learn about the current React reconciler - the Fiber reconciler. This reconciler is based on the Fiber object. React Fiber is a complete rewrite of React that fixes long-standing issues (React being synchronous) and offers incredible opportunities heading into the future. It focuses on animations and responsivness. Features like Error boundaries, Suspense and Concurrent Mode are all based on Fiber.
Fiber is just a plain JavaScript object, however, it also represents a unit of work. Fibers are processed in two phases: the render phase and the commit phase. During the render phase, React processes Fibers asynchronously and this opens up a world of possibilities. Fibers have many properties. We will learn about 'tag', 'stateNode', 'child', 'sibling', 'return' and many more. We will also learn about the Fiber tree and how React processes it. Finally, we will learn about Effects, which are processed during the synchronous commit phase. Effects are DOM mutations or lifecycle methods.
Timestamps:
0:00 Introduction
0:54 Old reconciler - Stack
2:02 What does Fiber do?
2:32 Two Fiber phases (render phase and commit phase)
4:24 Fiber 'tag' property
5:30 Fibers vs React elements
6:20 Fiber relationships ('child', 'sibling' and 'return' properties)
8:20 What is work?
9:49 Fiber trees (current and workInProgress)
10:57 Effects
13:32 How React processes a Fiber tree
16:24 Fiber 'alternate' property
16:56 React Fiber usage (Error boundaries, Suspense, Concurrent Mode)
17:56 Ending
Social Media:
►Twitter: / philip_fabianek
►LinkedIn: / philip-fabianek
►Website: www.philipfabianek.com
►GitHub: github.com/philipfabianek
Music:
Lodhi by Pali Gap / pali_gap
Creative Commons - Attribution 3.0 Unported - CC BY 3.0
Free Download / Stream: bit.ly/lodhi-pali-gap
Music promoted by Audio Library • Lodhi - Pali Gap (No C...
Lights Of Elysium - AERØHEAD / aerohead
Creative Commons - Attribution-ShareAlike 3.0 Unported - CC BY-SA 3.0
Free Download / Stream: bit.ly/lights-of-elysium
Music promoted by Audio Library • Lights Of Elysium - AE...
Solace by Nomyn / nomyn
Creative Commons - Attribution 3.0 Unported - CC BY 3.0
Free Download / Stream: bit.ly/SolaceNomyn
Music promoted by Audio Library • Solace - Nomyn (No Cop...
#ReactJS #ReactFiber #ReactDeepDive - วิทยาศาสตร์และเทคโนโลยี
This channel is really underrated, great work!
Thank you very much!
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!
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.
Incredibly useful! One of the best explanations of fiber that i've seen.
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!
简直太棒了，每个视频我都要看三遍以上，太喜欢你的解读方式了，希望能多出一些讲解视频！
Fantastic explanation detailing React Fiber-very helpful! Please continue creating this kind of video content.
I like your clear and concise explanation of React Fiber and this ambient music on the background :)
Thank you
Thank you. Your video is concise and very to-the-point. You've done a great job making it.
Thank you!
Great work on this video! Very informative, 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!
This is really outstanding work!
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.
I should know your channel early, great work! Thanks.
Please continue with tis content, it's so good
Best ever explanation about fiber. Thanks!
Thank you!
This is incredible content.
Thank you very much. It's a very good Fiber explanation.
Wow, you've made it so simple thx.
Hey thanks for really good animation. Quite easy to understand :D
Thank you!
Very usefull and clear video, thank you!
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.
Great job!
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
This is amazing content.
Wooah. Superb explanation, keep it up dude, I learned a lot from you videos. Thanks you and will subscribe immediately!
Thank you!
Awesome video 🙌🏼
Thank you!
man you are amazing
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
thanks for the video!
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!
Your videos need to be added to the new beta docs
I came in search of silver but I found gold, 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 😎
Please create more videos!!
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!
Use 1.25 speed, thank me later. Btw nice video!
please create more videos!!!
Nice informative video
Thank you!
thanks for sharing
Thanks for watching!
nice!
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
Great explanation, but need analogy with virtual dom.
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
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
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
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.
thanks