React is not Fast, but efficient!

Andreas Sujono
4 min readAug 7, 2022

There’re a lot of misconceptions that describe React as fast. That is not true at all. It doesn’t mean React is bad, obviously because a lot of big companies still use React until now. In addition, Meta, the creator and core developer of React always improves and maintains their code to be fully performant.

Firstly, we do need to understand how React works and what problems do React and other frameworks want to solve. React uses Virtual DOM and reconciliation with diffing algorithm to “effectively” detect which HTML node is changed and only update that changed nodes. However, Virtual DOM is not fast. It adds an additional work or overhead behind the scenes to do all the comparisons between the real DOM and virtual DOM.

React and other frontend frameworks try to make web development more declarative and the development process faster. Imagine back in the good old days where for example, if we want to update text in a node, we would do something like this:

document.getElementById('text').innerHTML = "Updated Text"

Basically, we need to update the changed node directly. Things get more complicated if we want to create a new HTML node, append a child to a parent, etc. We must do it manually in an imperative way. There’s an advantage of doing this though, it is fast. In fact, the fastest because we dictate which node is changed and update it directly. On the other hand, In React, we put the dynamic data inside the state and use that data inside an HTML node. When the data is updated, React does not know which node is using that data and needs to be updated. React then construct a Virtual DOM and do reconciliation to update the real DOM.

However, writing this kind of imperative code effectively and efficiently is difficult and time-consuming especially when we need to deal with things like JavaScript transpiling, bundle splitting for lazy loading, and others. With frameworks like React, all of these things are abstracted away and enable us to focus on the core code in a more declarative way.

if React is not fast, is there any better performant framework?

A couple of weeks ago, I read an article about Svelte. Maybe you have heard about this framework before. Svelte is developed by Rick Harris and the third version of…

--

--

Andreas Sujono

A Full Stack Developer with 5 years of working experience, Web2 and Web3 Enthusiast, twitter: @AndreasSujono2