VueJS Video Tutorial: Why Vue.js Performs Better Than React

The question of performance arises quite often when we talk about front-end libraries. Even if in fact this often comes from a bad use of these libraries, it is interesting to compare the operation to better understand the optimization points. And today we will see why VueJS performs better than React.

Static blocks

The first point that makes VueJS more efficient from the outset is the use of a compiler which will transform the code of .vue files more significantly into JavaScript files. In the case of JSX the transformation is rather simple, the JSX elements are replaced by a call to the function createElement from React.

Hello people
;
// Will give
React.createElement ("div", {id: "demo"}, "Hello people");

VueJS, during its transformation will detect the static nodes (which do not depend on the state of the component) and will "hoist" the definition of these nodes outside the components so as not to have to regenerate them at each rendering.

const _hoisted_1 = / * @__PURE__ * / createBaseVNode ("div", null, (
  / * @__PURE__ * / createBaseVNode ("h1", null, "Hello world"),
  / * @__PURE__ * / createBaseVNode ("p", null, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore at quos deserunt deleniti. Recusandae architecto ipsa voluptatum fugiat, ea voluptatem, quod reiciendis eaque sequi queatidem adipisci excepti! ")
), -1);

Here for example, Vue detected that this div was static and automatically moved the definition outside the function, which means that these elements cannot be recreated at each render for each new render.

On the React side, such an optimization must be done manually using a React.memo () and a dedicated component. This also allows more control on the part of the developer and makes it possible not to generate nodes that would ultimately not be used.

Rerender

The second point, and the most important in my opinion, is the way Vue.js handles renderings of child components. Indeed, in react a child component is rendered when the parent component is rendered. In the case of Vue.js the subcomponents are only rendered if the properties change.

In this situation, the component MyTable will only be returned if the value of items exchange. On React this optimization must be done explicitly by the developer by creating a pure component.

const MyTable = memo (({items}) => {
  return 
{/ * ... * /}
})

Computed

Calculated properties on Vue.js are only calculated when the component references them. For example on React.

export function MyPassword ({password}) {
  const hashed = hash (password)
  // ....
  return 
Hash: {hashed}
}

The hash calculation will be done here before each rendering.

Vue.js side the value of hashed will only be recalculated when the value is used. If the value is not required in the template then the calculation will not be done. Also, Vue.js is able to detect the values ​​used and will only do the calculation here when password exchange.

On React, we can avoid calculations but it will once again have to be done explicitly.

export function MyPassword ({password}) {
  const hashed = useMemo (() => hash (password), (password))
  // ....
  return 
Hash: {hashed}
}

So Vue.js> React?

From these examples one might think that Vue.js is a better choice than React no matter what, but in reality we are faced with two different approaches. Vue.js prefers to automate as much as possible to focus on the code / logic and will offer better performance at the base sometimes to the detriment of a little lack of control.

React, on the other hand, doesn't do anything automatically and will ask the developer to be more explicit if they want to optimize performance. Which sometimes ends up adding a lot of noise to the code.