What Is React Fiber? React.js Deep Dive #2

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

[@uhmindset]

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.

[@mehmetturgutgezgin6439]

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.

[@PhilipFabianek]

Thank you for watching!

[@NahuelVeron]

This channel is really underrated, great work!

[@PhilipFabianek]

Thank you very much!

[@lucretius1111]

Incredibly useful! One of the best explanations of fiber that i've seen.

[@xiaoyuwang8446]

简直太棒了，每个视频我都要看三遍以上，太喜欢你的解读方式了，希望能多出一些讲解视频！

[@karpo1180]

I like your clear and concise explanation of React Fiber and this ambient music on the background :)

[@PhilipFabianek]

Thank you

[@harendrasharma8107]

this is literally very under-rated channel , this is outstanding explanation of this much of complicated topic. thanks @philip keep up the good work.

[@PhilipFabianek]

Thank you very much!

[@mdtanviralam7571]

Fantastic explanation detailing React Fiber-very helpful! Please continue creating this kind of video content.

[@twentysixhugs]

Thank you. Your video is concise and very to-the-point. You've done a great job making it.

[@PhilipFabianek]

Thank you!

[@duytannguyen8849]

Awesome videos!!! I am so lucky when finding out your channel, your videos are very interesting and helpful! Thanks so much man!

[@PhilipFabianek]

Awesome, thank you!

[@williamabboud]

Great work on this video! Very informative, thank you!

[@pushpabaiwankhade7207]

This is really outstanding work!

[@maximmalakhov7674]

Thank you very much. It's a very good Fiber explanation.

[@user-mb1jg9bq9u]

I should know your channel early, great work! Thanks.

[@user-kn6no9hz4o]

Very usefull and clear video, thank you!

[@OmnispectiveHub]

Please continue with tis content, it's so good

[@aaadesh]

Wow, you've made it so simple thx.

[@antonrusak3207]

Background music is really pacifying and non-interruptive. Thanks for explaining, good sir.

[@PhilipFabianek]

Thank you for the feedback!

[@user-ky5ig8sv1l]

Best ever explanation about fiber. Thanks!

[@PhilipFabianek]

Thank you!

[@resetengineering]

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

[@ckorina_top2456]

Very very goood man! I'm waiting for a video about hooks behind the scenes!

[@PhilipFabianek]

Thank you! I'm currently working on the video about React Hooks

[@kehindefasunle4933]

The animation made it understandable. Good job 👌

[@PhilipFabianek]

Thank you!

[@kehindefasunle4933]

I was going to ask if we can work with the fiber directly.

[@PhilipFabianek]

It is possibe but there is no reason to do so, because Fiber is just the internal part of React after all.

[@mohdhaziq9859]

Hey thanks for really good animation. Quite easy to understand :D

[@PhilipFabianek]

Thank you!

[@milospavlovic3728]

Wooah. Superb explanation, keep it up dude, I learned a lot from you videos. Thanks you and will subscribe immediately!

[@PhilipFabianek]

Thank you!

[@borjinator]

This series is top notch. I would like to send you a kofi or something in appreciation.

[@PhilipFabianek]

Thank you! If you want to support me, I do actually have a Kofi account at ko-fi.com/philipfabianek

[@IsraelAgyemanPrempeh]

Your videos need to be added to the new beta docs

[@dearozero3631]

This is incredible content.

[@tmanley1985]

This is amazing content.

[@i_dont_likevodka3062]

thanks for the video!

[@js-noob]

Please create more videos!!

[@Johnwick-9996]

I came in search of silver but I found gold, thanks

[@dixztube]

Great job!

[@namansaxena5021]

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. 😅

[@PhilipFabianek]

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.

[@namansaxena5021]

@@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 😎

[@CrusaderMen]

Thank you!

[@WomboBraker]

man you are amazing

[@js-noob]

please create more videos!!!

[@kamiladamczyk9369]

The English is a little bit clunky, but the quality of the knowledge and the presentation is extraordinary. Keep up the good work!

[@PhilipFabianek]

Thank you!

[@ivanliszewski2247]

Awesome video 🙌🏼

[@PhilipFabianek]

Thank you!

[@anshi3948]

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?

[@PhilipFabianek]

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

[@higorcoimbra6591]

Is the algorithm used to walk down the tree a DFS?

[@PhilipFabianek]

Not sure it is precisely DFS but React definitely goes through the tree in a DFS manner

[@yalgaar07]

Nice informative video

[@PhilipFabianek]

Thank you!

[@user-fy5bl3kr6j]

thanks for sharing

[@PhilipFabianek]

Thanks for watching!

[@eegaramesh3093]

Great explanation, but need analogy with virtual dom.

[@PhilipFabianek]

Thank you!

[@timjobs9072]

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]

blog.logrocket.com/deep-dive-react-fiber/ indepth.dev/posts/1008/inside-fiber-in-depth-overview-of-the-new-reconciliation-algorithm-in-react

[@timjobs9072]

@@PhilipFabianek Oh, thank you, I really appreciate it

[@dan-kn3dm]

Use 1.25 speed, thank me later. Btw nice video!

[@yannislee5469]

nice!

[@PhilipFabianek]

Thank you!

[@TajAlasfiyaa]

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

[@PhilipFabianek]

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.

[@TajAlasfiyaa]

@@PhilipFabianek thank you

[@karthiksuryadevara2546]

Is fiber tree == virtual Dom?

[@PhilipFabianek]

No, they are not

[@karthiksuryadevara2546]

@@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

[@user-hb3gb9zn7n]

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.

[@VKY-XLR8]

React fiber tree IS virtual DOM?

[@PhilipFabianek]

No, they are two different trees

[@VKY-XLR8]

@@PhilipFabianek love the way that u reply to questions, highly appreciated. May I ask where can I find the answers to the question..

[@PhilipFabianek]

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]

@@PhilipFabianek will check them, thank you :)

[@user-hb3gb9zn7n]

@@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.

[@momo-we4yc]

thanks