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

Video Description

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: https://twitter.com/philip_fabianek ►LinkedIn: https://www.linkedin.com/in/philip-fabianek/ ►Website: http://www.philipfabianek.com ►GitHub: https://github.com/philipfabianek Music: Lodhi by Pali Gap https://soundcloud.com/pali_gap​ Creative Commons — Attribution 3.0 Unported — CC BY 3.0 Free Download / Stream: https://bit.ly/lodhi-pali-gap​ Music promoted by Audio Library https://youtu.be/NgrCrLtRqV4​ Lights Of Elysium - AERØHEAD https://soundcloud.com/aerohead​ Creative Commons — Attribution-ShareAlike 3.0 Unported — CC BY-SA 3.0 Free Download / Stream: https://bit.ly/lights-of-elysium​ Music promoted by Audio Library https://youtu.be/FyDoQB0vBZI Solace by Nomyn https://soundcloud.com/nomyn​ Creative Commons — Attribution 3.0 Unported — CC BY 3.0 Free Download / Stream: http://bit.ly/SolaceNomyn​ Music promoted by Audio Library https://youtu.be/JY8vREZ6XYE​ #ReactJS #ReactFiber #ReactDeepDive