React: The Virtual DOM
what is DOM? Document Object Model is representation of html elements in the form tree of JavaScript object. For example {html:{head: {title:{value:'Welcome to my website'}, body:{h1:{value: 'Cat Photo App'}}} using Javascript we can modify it. let h1 = document.getElementByTagName('h1'); // {value:'Cat'} h1.value = 'Cat Lovers App' // we modified the DOM Using JavaScript , jQuery, developers having making website this way. Problems with this type of Development: 1. slow rendering issues: every modification of element is costly 2. It's hard to keep track of changes : ReactJS introduced Virtual DOM Virtual DOM is representation of real DOM. It makes us feel as we are creating a entire new Real DOM. Everytime there is any change in Virtual DOM. There is change in Virtual DOM (like timer update, button clicked). React uses Algorithms to update subtrees of Virtual DOM. After that new Virtual DOM is mounted on Real DOM. Is re-creating