Html DOM manipulation is quite an expensive and slow process. JavaScript by itself has very high performance. It’s the Dom manipulation that slows down your app. The reason we use react DOM is so that we can improve this performance. when we use react-dom for rendering we just describe to react how we want our HTML to look like and react will compare our new changes with the virtual DOM in memory and only update the HTML DOM where necessary, and in turn improving application performance
This is a pretty good article that explains how react’s virtual DOM improves performance : https://programmingwithmosh.com/react/react-virtual-dom-explained/
it not how it works you write it using js and inside the js file your return with an Html and render it with DOm it will make your app much faster
learn more at:https://reactjs.org/docs/react-dom.html
In case you don’t know, the “HTML” that you write in React actually isn’t HTML at all, it’s JSX.
It may look like HTML, but it offers features that make it much more powerful than plain HTML.
JSX elements can be used inside javascript code, without any quotes. The result of JSX is React objects, and those in the end generate DOM objects when reactDOM.render is called.
Also note that DOM objects would normally be created by the browser as a result of parsing HTML source. In case of React, no HTML parsing takes place, except for the main index.html file, all the rest is done through JS.
I have just started to learn react and I can’t understand why exactly do we need to use reactDOM.render() when we can just write straight HTML.
Please provide enough code so others can better understand or reproduce the problem.
So react compares and update change only where necessary, then what does the real dom do that makes it slow?
react uses the underlying real DOM, but in a much more effective way compared to you trying to manipulate the real DOM using HTML tags, plain javascript or a library like Jquery. The real dom is slow whether or not you use react. its just that react can give you faster real dom performance by updating only what is required (it keeps the updates to a minimum). check this out for more info :
