React Architecture

React Architecture :

• React is based on components and components are rendered in UI.

• So the input to components come from props and state i.e they act as a Model

• React offers only one way data flow i.e from the model (props + state) in components via the render function to the Document Object Model (DOM).

•  DOM is the result of rendering the Model i.e. Props + Model.

• So once DOM has rendered, the way to change it is by changing the Model. Once DOM has rendered it can generate Events which feed back to Component and the same cycle continues i.e . from model to render to DOM.

•  So does it update whole DOM for every change in state?

•  Answer is NO. If that is the case the performance would be worse then how does it handle these model changes and Rendering?

• The Answer is React maintains the DOM abstraction called VIRTUAL DOM i.e on every state change React Updates this Virtual DOM  which is extremely fast and then it compares it rendered DOM with Virtual and then renders only changes in most efficient manner.