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: http://www.philipfabianek.com
►GitHub: https://github.com/philipfabianek

Music:

Lodhi by Pali Gap   / 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    • Lodhi – Pali Gap (No Copyright Music)  ​

Lights Of Elysium - AERØHEAD   / 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    • Lights Of Elysium – AERØHEAD (No Copy...  

Solace by Nomyn   / nomyn​  
Creative Commons — Attribution 3.0 Unported — CC BY 3.0
Free Download / Stream: http://bit.ly/SolaceNomyn​
Music promoted by Audio Library    • Solace – Nomyn (No Copyright Music)  ​

#ReactJS #ReactFiber #ReactDeepDive