i am creating notes for react js help me format them

virtual DOM?
===============
-Frequent DOM manipulations are expensive and performance heavy. 
-Every time the DOM changes, browser would need to recalculate the CSS, 
 run layout and repaint the web page.
-we need a way to minimize the time it takes to repaint the screen. 
 This is where the Virtual DOM comes in.
 
 
What Virtual DOM is
===================
-React uses virtual DOM to enhance its performance.
-Virtual DOM is a virtual representation of the real DOM.
-A virtual DOM is the DOM where a representation of the UI is kept in memory and synced with the DOM.
-When state changes occur, the virtual DOM is updated and the previous and current version of  virtual DOM is compared. This is called “diffing”.
-It then makes sure that batched updates are sent to the real DOM for repainting or re-rendering of the UI.
-React never reads from real DOM, only writes to it.


 
How does React Work? (Virtual DOM)
====================
-A virtual DOM is a lightweight JavaScript object which is just a copy of the
 real DOM. It is a node tree that lists the elements, their attributes and content as 
 Objects and their properties.
-React creates a VIRTUAL DOM in memory.
-Instead of manipulating the browser's DOM directly, React creates a virtual DOM in memory, where it does all the necessary manipulations, before making the changes in the browser DOM.
-React finds out what changes have been made,and changes only what 
 needs to be changed in the actual DOM.
 
 
-Whenever application state/props changes, 
 these are the steps that React performs in order to optimise performance.
a. Generate a new Virtual DOM that represents the new state of our application.
b. Compare the old Virtual DOM (which represents the current HTML DOM) vs the new Virtual
   DOM.
c. Based on (b) find the minimum number of operations to transform the old Virtual DOM (which represents the current HTML DOM) into the new Virtual DOM.



What is the difference between Shadow DOM and Virtual DOM?
==========================================================
-The Shadow DOM is a browser technology designed primarily for scoping variables and CSS in web components. 
-The Virtual DOM is a concept implemented by libraries in JavaScript(React) on top of browser APIs.



ReactDOM
========
-ReactDOM is the glue between React and the DOM.
-React creates a virtual representation of your User Interface (what we call a Virtual DOM) and then ReactDOM is the library that efficiently updates the DOM based on the Virtual DOM.
-The reason why the Virtual DOM exists is to figure out which parts of the UI need to be updated and then batch these changes together. 
-ReactDOM receives those instructions from React and then efficiently updates the DOM.




Web Browser Workflow
====================
Parsing HTML to construct DOM tree --> Render Tree construction --> Layout of the Render tree -->
 -->painting the render tree.
 



React Reconciliation 
====================
-Reconciliation is the process through which React updates the DOM.
 (syncing the Virtual DOM to the actual DOM)
-Reconciliation is the mechanism that tracks changes in a component state and renders 
 the updated state to the screen.
-It's a step that happens between the render() function being called and the displaying of elements on the screen. This entire process is called reconciliation.


Stack Reconciler < React-16
================
-Synchronous
-works like a stack
-cann't be interrupted

Fiber Reconciler
================
-Fiber is the new reconciliation engine or re-implementation of core algorithm in React v16.
-React Fiber reconciler makes it possible to divide the work into multiple units of work(incremental rendering).
-It sets the priority of each work, and makes it possible to pause, reuse, and abort the unit of work.
-Fiber is Asynchronous.
-reconciliation and rendering to the DOM weren't separated, and React couldn't pause 
 its traversal to jump to other renders in between. This often resulted in lagging inputs.
-Fiber allows the reconciliation and rendering to the DOM to be split into two separate phases:
 Phase 1: render(processing)
 -----------------------
 -React creates a list of all changes to be rendered in the UI 
 -Once the list is fully computed, React will schedule these changes to be executed in the next phase.
 -React doesn't make any actual changes in this phase. 
 Phase 2: Commit
 ----------------
 -React tells the DOM to render the changes that was created in the previous phase.
 -the Reconciliation phase can be interrupted, the Commit phase cannot.