React allows us to write maintainable and performant code by using the concept of components.
React is Declarative - Components allows us to foucus on describing the UI we want, rather than focusing on the details of how the UI actually gets inserted in the pages. React do the tracking of the all of the individual elements and let us focus on the building the application.
Writing on to the DOM is most expensive thing than creating thousands of JavaScript objects
High level flow of React:
Virtual DOM is an `in memory` representation of the real DOM. During the initial rendering process, React generates virtual DOM.
When state changes, React updates the virtual DOM tree, after the virtual DOM update, react tries to compare the current version of the virtual DOM with the previous version of the virtual DOM. This process is Diffing. Later, it performs batch updating on the real DOM which makes react more efficient.
JSX → JS Objects → Render (virtual DOM ↔ Real DOM)
Virtual DOM is an `in memory` representation of the real DOM. During the initial rendering process, React generates virtual DOM.
When state changes, React updates the virtual DOM tree, after the virtual DOM update, react tries to compare the current version of the virtual DOM with the previous version of the virtual DOM. This process is Diffing. Later, it performs batch updating on the real DOM which makes react more efficient.