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:

Music:

Creative Commons — Attribution 3.0 Unported — CC BY 3.0

Creative Commons — Attribution-ShareAlike 3.0 Unported — CC BY-SA 3.0

Creative Commons — Attribution 3.0 Unported — CC BY 3.0

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

[mehmetturgutgezgin]

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.

[lucretius]

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

[NahuelVeron]

This channel is really underrated, great work!

[harendrasharma]

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

[karpo]

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

[twentysixhugs]

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

[duytannguyen]

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

[mdtanviralam]

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

[williamabboud]

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

[mbjgbqu]

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

[stephen]

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.

[OmnispectiveHub]

Please continue with tis content, it's so good

[mohdhaziq]

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

[maximmalakhov]

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

[kyigsvl]

Best ever explanation about fiber. Thanks!

[aaadesh]

Wow, you've made it so simple thx.

[milospavlovic]

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

[ckorina_top]

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

[knnohzo]

Very usefull and clear video, thank you!