More than likely if you ask someone why use react, they might say because it's fast, or react is super efficient when it comes to rendering updates. It doesn't really help answer it. Why is it fast, I want to dig into a few key features that contribute to react speed. Number one, React only updates what is necessary. You see in react when a component is updated ensures that it only applies what has changed to the DOM. To demonstrate I have a simple example that consists of component named button.
And every time the button is clicked, it increments a click count state by one and renders that count as part of the buttons label. I'm going to pop this example open in a standalone browser window so I can better access my Chrome Dev Tools. And in the elements tab, I'll select the button and expand it so we can see all the contents of the element. Now when I click the button, you can see the number value is changing. And it's also being highlighted each time it changes. This highlight represents what is being changed in the DOM.
And we can see that our button and click count label remain untouched. Only the number value is being updated. Now I have this same example in plain JavaScript with no react this time, I'm going to select the element in dev tools and expand it just like before. But this time when I click the button, you can see that the entire button is being highlighted this time. This means that instead of just the number being changed, the entire button is being changed in the DOM. While this example is simple, imagine how important these efficient updates become when your app grows in size and has hundreds of elements.
Another thing react will do is batch state updates together. If you trigger multiple state changes from a react event handler or lifecycle method, it'll batch all those changes into a single render. For example, let's pretend I have a simple react app that consists of a search input component, a results list component, and a pagination component. When I click on the search button, it triggers a state change in all three components are given three state changes, you would usually expect to see three renders, but that is not the case here. It is actually just the single render this because all three state updates from batch together and react. is able to do this because all three updates originated from the same click event.
And now on to the last item on the list. React elements are just plain objects. Unlike browser DOM elements, React elements are objects and cheap to create. In fact, your entire react app is represented by an object that is held in memory. For example, let's take this simple HTML markup for a login form with a username and password input. In react this will be represented by an object that looks something like this, you can see that each of the HTML elements are represented by an object in react.
Then when a change occurs, React will compare the previous version of the object to the updated version of the object and make updates based on the differences and then render the changes back to the DOM. While this was a very simplified breakdown of reacts complex virtual Dom concept, I hope it gave you some insight into what happens under the hood and react. And these are just some of the great features that contribute to react speed and efficiency. While these items may not be required learning for react, I believe having at least a high level understanding these features will help you become a better react developer.