React - Virtual DOM, Reconciliation, Fiber

Introduction

Before discussing Virtual DOM, we need some context of the Browser Rendering process and DOM.

These are the steps browser follows to render our website :

Parsing HTML :

The browser parses our HTML and stores it in memory as a tree structure of a document, which is also known as DOM (Document Object Model) or sometimes as Real DOM. It is a Web API used to build websites.

DOM methods allow programmatic access to the tree. With them, …

browser context document dom html introduction memory parsing process react rendering stores the browser tree virtual website