Misconceptions about Virtual DOM

Misconceptions about Virtual DOM

Misconceptions about Virtual DOM. If you believe Virtual DOM is a “lightweight copy” of a real DOM helping to speed up the updates by batching them together— continue reading. How many instances of Virtual DOM exist in your app? Is it a single component tree per app, or maybe one Virtual DOM.

If you believe Virtual DOM is a “lightweight copy” of a real DOM helping to speed up the updates by batching them together—_ continue reading_. Albeit being correct, it’s a highly misleading answer. Surprisingly, it’s also the most popular one: googling for “react virtual DOM” leads you to very similar descriptions:  1, 2, and you get ~ the same results even if you stick to the top answers on StackOverflow:  1,  2,  3;

The content below equally applicable to React and Blazor.

Why it’s a misleading answer?

#1. It doesn’t highlight the key problem Virtual DOM solves — namely, the elimination of unnecessary re-renders. And when I say “re-renders”, it’s not about re-rendering of certain DOM elements on browser UI update cycles. It’s about not calling render() methods of React components which are known to produce the same output, which effectively eliminates re-rendering of the whole subtrees of components.

If you know JS and React, check out this example. It logs

"TimeString.render(): ..." message every second, even though Clock component re-renders itself 10 times per second (see setInterval call on line 16) and produces an output with TimeString component on every render. So why TimeString logs its render just once per second rather than 10? That’s because TimeString extends PureComponent, which overrides shouldComponentUpdate to ensure re-rendering happens only once props or state changes, and time property is a string that changes just once per second. If you change TimeString’s base type to Component, it will start reporting 10 renders per second.

Now, notice that to make it work, something should call shouldComponentUpdateon existing component. In other words, Virtual DOM diffing algorithm has to conclude that TimeString component used in prev. render is actually the same component as we’ve just rendered. And this is exactly what happens during the reconciliation:

  • Changes made to DOM elements are applied to the real DOM — almost every description of Virtual DOM highlights just this part of the equation.
  • _All mounted React components decide whether they have to re-render due to possible changes in `props_` — and this crucial part is somehow frequently ignored, even though it’s the one responsible for the biggest savings.

Below is an illustration of how diffing works in Blazor (which copies React component model almost exactly):

blazor react javascript dotnet

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Blazor vs. React

In this article, you can explore how React and Blazor differ in a variety of areas, including folder structure, performance, and more. React and Blazor share the similarity of being client-side frameworks/libraries for building rich and interactive modern client-side applications. Blazor is a new Microsoft UI framework that uses a unique approach for leveraging C# .NET and the WebAssembly framework to create SPAs running in web browsers. We have React: a declarative, efficient, and flexible JavaScript library for building user interfaces and UI components.

Calling JavaScript from C# in Blazor WebAssembly (and vice versa) [Blazor JavaScript Interop]

In this video, I am going to cover the JavaScript Interop aspects of Blazor WebAssembly. Calling JavaScript from C# in Blazor WebAssembly (and vice versa) [Blazor JavaScript Interop]

Blazor vs React: Passing Values to All Children

This post is the start of a series about Blazor vs React. The main purpose of this series is not to compare Blazor and React, but instead to show how things can be done in both technologies. Hopefully, this will be helpful for React developers that want to try/switch to Blazor.

Blazor Tutorial: JavaScript Interop | Calling JavaScript from C# - EP06

Blazor Tutorial: JavaScript Interop | Calling JavaScript from C# - In this Blazor video, I am exploring how you can call JavaScript functions from C# in our blazor apps. Blazor is a free and open-source web framework that enables developers to create web apps using C# and HTML.