The Virtual DOM and Fibers
In order to explain React’s virtual DOM you must first have an understanding of what the DOM is. If you don’t take a second to educate or refresh yourself here. According to the React site the virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM. This process is called reconciliation. It allows you to dictate the state of the UI and make it a reality on the DOM. The virtual DOM allows us to bypass having to dictate attribute manipulation, event handling, and manual DOM updating which you would otherwise be required to build into your app.
Is the Shadow DOM the same as the Virtual DOM?
No. The Shadow DOM is used for scoping within CSS. I hadn’t known about the Shadow DOM until I did some research for this article and it’s actually pretty cool. I found a great article here that helped elucidate the mysterious Shadow DOM, it’s worth the quick read.
What is a Fiber in React?
A Fiber is essentially an incremental unit for rendering purposes. By breaking down what needs to be rendered and updated to the DOM, React is able to update the most important things first. Fibers can be reimplemented in the stack whenever and however they may be needed because they can be stored in memory.
The Structure of a Fiber
A fiber is a javascript object that contains data about the component as well as data about that component’s input and output. A fiber is both an instance of a component as well as frame in the call stack.
Fibers have both types and keys, just like React elements. A fiber created from a React element inherits that element’s type and key. The main use for types and keys in a fiber is for reconciliation to determine whether or not it’s possible for the fiber to be reused.
Fibers also have parents, children, and siblings which point to other fibers in a recursive tree structure
A return fiber is the fiber that is returned to once the current one is finished processing. This is commonly thought of as the parent fiber and operates in the same way as a call stack. Essentially whenever the fiber is done processing its parent begins processing.
Fibers are pretty complex and have taken me some time to get a grasp on. If you’re having trouble try reviewing a call stack and imagine a fiber as a frame in a call stack. This helped me to conceptualize them which allowed me to expand my understanding. I started to understand why you would want to reimplement the stack using React reconciliation, it’s really powerful when you think about it. Here is a really great in depth analysis of fibers. There are a lot of good resources for call stacks but I’m partial to this video, it really helps to have a visual to understand the way it works and this is the way I originally about the call stack (I know it’s long and so is this sentence but both are worth it).
I hope this helped, I said I felt like I didn’t learn that much last week but I learned a lot this week. I didn’t even know fibers were a thing and while I don’t think I have a complete understanding of them I would feel comfortable talking about them if I was asked about them in a coding interview. It’s important to keep in mind that fibers are pretty new and they will probably change in the future. If you don’t understand, that’s ok, it takes time, don’t give up. Keep coding, keep learning, keep growing, that’s all I got.
