#virtualdom

Understanding Virtual DOM in React: Key Concepts and Benefits

React is a popular JavaScript library used to build fast and interactive web apps. A key reason for its speed is the Virtual DOM — a smart, in-memory version of the real DOM.

The real DOM is how a browser displays a web page. But updating it directly can be slow. React solves this by using the Virtual DOM. When something changes, React updates the Virtual DOM first, compares it with the previous version, and then updates only what’s necessary in the real DOM. This makes apps faster and smoother.

React also uses smart features like keys in lists, one-way data flow, and component-based design to avoid unnecessary re-renders. Tools like React Developer Tools and the Profiler help developers track and improve app performance.

The Virtual DOM is a core concept in React that plays a crucial role in optimizing the performance of Reactjs. It’s a simplified, in-memory representation of the actual DOM. The Virtual DOM allows React to efficiently update the real DOM and avoid unnecessary re-renders.

This blog has been completely untouched since I started it at the beginning of Fullstack Academy (OOPS). Now that I have completed the curriculum and have since become a teaching fellow, I will re-commission this blog to try to document my further learning. :)

With all the craze surrounding React/Flux, I figured I should take it for a spin. Coming from an Angular background, React was definitely not as easy to pick up as I had hoped, especially because React prefers JSX syntax, but once I got the hang of it, the benefit of React shines through.

I've seen a lot of articles regarding React v. Angular, and I hate to break it to you, but comparing the two is illogical. Angular is a full-on FRAMEWORK which includes a view layer, while React is ONLY a view layer. Unlike Angular, React does not include AJAX capabilities, have a data layer, nor does it have any event systems. Repeat after me:

React is NOT a Framework

I mentioned up there that React uses JSX syntax. As developers, we have been conditioned to not throw JS directly into the HTML. So, JSX syntax may initially be cringe-inducing, but when JSX is used with React, it makes your code much more comprehensive. Essentially, JSX syntax ties HTML and JS together in a nice bundle known as a "component" and allows you to easily see how your code will render in one file. Neato!

To ride off the component train of thought, React allows you to break up more complicated problems into bite-sized pieces of components. Think of components as Lego building blocks, which you can use to build different combinations components to create your app. The components can be built on top of other components and be re-used for other purposes later as well.

Lastly, React also uses this thing called a virtual DOM that handles data changes reflected in the DOM more efficiently. What happens is that the DOM will re-render only when the data changes and it changes only what has changed, and reduces unnecessary re-rendering. React team member, Sebastian Markbage, gives a more in depth explanation here.