May 07, 2022

Vue vs. React — Which One To Choose in 2022? [Update May-June]

Oleg Goncharenko

IT Consultant

15 min

Vue.js and React.js are JavaScript-based toolkit systems. They help build dynamic user interfaces. Regarding their concept, the whole UI is the data, and every change leads to new functions. These functions are refreshing certain page blocks, commonly known as UI components.

In Vue.js and React.js, components are the pieces of JavaScript and HTML code organised into one file. The components have similar hierarchy principles, with parents and children, who could pass the data to each other.

To find out the distinctive features between React and Vue.js, we should take these criteria into account:

  • How the components are created with React and Vue.js;
  • How the components communicate with each other;
  • How the components impact the browser DOM.

So, knowing that, we will be able to make a choice. Needed to mention that React could not be called a framework, but it has always been considered so. Even though it is a JavaScript library, it is suited to build an entire view part of the web application.

Table of content

Component build principles in React and Vue.js

JSX and single-file component structure in React

Components render the data on web browsers. They include the UI part, which is shown to a user (HTML) and logic (JavaScript). The logic describes functions and methods to communicate the data in the browser.

React uses JavaScript Syntax Extension (JSX), a syntax language that helps write functions corresponding to native methods of browsers. Safari, Chrome and Firefox are based on JavaScript engines that can directly talk with the logic functions written in React. Since JavaScript code is enriched with HTML tags, it can't be recognized by a web browser. So, React is converting the programming code to pure JavaScript, using Babel Transpiler.

JSX allows to return HTML in JavaScript, or it could be executed in HTML. Also, JavaScript variables can be assigned with HTML tags, like this:

const message = <h1>React is cool!</h1>

Dynamic variables could be put into bracket syntax ( { ... } ) in the middle of JSX.

component code in React

An example of React component, written with JSX (image source link).

According to Stackshare statistics, the most favourite features of React are components (747) and simplicity (484). JSX, though, takes less user appreciation (31).

react-advantages

I think the biggest concern about JSX is that it doesn't require a specific code structure. The logic and UI of components are in one file so that it could lead to messy code.

The idea of the single-file component is opposed to Angular, which proposed keeping HTML, JavaScript and CSS in separate files. Completing components in a single file didn't get enough popularity unless Airbnb and Netflix joined the React community and began using React for their MVP construction.

When searched for materials related to our topic, I found the 'Do Better Dev Show podcast'. In one of their episodes, Nathan Calvank and his co-host Gyanesh Mishra discussed the main difference between Vue and React. In the middle of the podcast show, Nathan shared his technique of code adjustment in React:

"JSX combines logic and presentation. You have got your HTML alongside your JavaScript in the same component. The way it is separated now: you have all your logic at the top, and you just return all your JSX below that.

If you have a sufficiently complex application, you can pull out all of that logic to a container. The container holds all that logic and loads components, including this logic".

Nathan Calvank

Nathan Calvank

Developer and Co-Author of "Do Better Dev Show" podcast

You will get the benefit of JSX, getting the separation of concerns from the development side.

So, dealing with the potential frustration of those things combined, this is a reasonable way of keeping these things separated".

You can listen full podcast here

Vue.js follows HTML templates for the component design

The same as React, Vue.js proposes keeping the UI and logic in the same file. The component code in Vue.js is contained within a specific HTML template.

The templating brings a clear image of the component code. It helps programmers keep an eye on the methods, view the properties and observe the render functions.

vue-js-component-structure

Vue.js has a specific syntax. It uses double braces {{ }} as place-holders for data. HTML attributes are the directives in Vue.js and contain the prefix v-.

The framework's system involves objects, classes and behavior categories. It matches with the experience of programmers who had worked with object-oriented programming.

Structure of the component in Vue.js

In the meanwhile, Vue.js enables writing with JSX, which extends the programmatic power of the framework.

Summary of the requirements:

React requires solid JavaScript skills, while Vue.js is more oriented to novice developers. Similar to React, Vue.js enables writing with JSX, but the components are written with HTML templates.

How do components impact browser DOM?

React renders data through the virtual copy of browser DOM

When a user opens the web page, the Internet browser parses it to a tree-like structure and reads it up to down. This tree-structured file is called the Document Object Model (DOM).

If the user did some action on the page, the browser needs to recreate and re-read the DOM. It takes more loads and decreases the resources of the browser.

React avoided the traditional DOM rendering and leveraged the capacity of data rendering in the browser.

Pete Hunt, a core member of React team, described the idea for the InfoWorld magazine:

"The browser itself is retain mode. You click an HTML element on the screen, and then you change it over time. The programming model we wanted for React was basically to throw out and redraw everything. We think that's easier to understand. However, the browser is not designed to work like that. What we did is we built something that we're calling the virtual DOM to abstract that. And so we have a way of basically rendering to a virtual DOM, throwing out the whole virtual DOM and re-creating it every time the data changes, and then React under the hood will convert that, will get the old virtual DOM with the new virtual DOM and then convert that to manipulations of the real browser DOM".

Thank you, Pete. Based on your explanation, we could figure out how does the Virtual DOM operates:

  1. Before the web page is loaded in the web browser, React makes a copy of the DOM and places all the objects in a new component.
  2. When a user opens the web page, React doesn't access a real DOM but renders the copy of DOM. It is called the Virtual DOM.
  3. While the user walks through the page, React is computing the changes. If the user clicked a button or performed any other action, React creates a new snapshot of the DOM and compares it with the previous version.
  4. If one more node element has changed, React updates the page rendering the real DOM.

Amazingly, that React team kept in mind an idea of the game engine when developed the virtual DOM:

Pete Hunt

Pete Hunt

A Member of Core Team of React

The difference with React is the way that your program is much more like a game engine, as opposed to these alternative approaches, with data-binding.

Further, he explains: "With a game engine effectively what happens is the screen is cleared at the beginning of every frame, and then you redraw the scene.

Principles of virtual DOM in React

Vue.js is tracking only the dynamic parts in virtual DOM

Vue.js has followed the idea of React's virtual DOM, but it is processing differently.

Evan You, a founder of Vue.js, made a critical review of React virtual DOM. He shared his insights during the presentation in Toronto:

"Some of you might know that virtual DOM allows us to compare two snapshots of your view structure and figure out what actual changes you should apply to the DOM. In most cases, it is relatively cheap and fast. However, there is still a cost because you are recreating lots of JavaScript objects. You have to walk through the whole tree on each update to figure out what has actually changed. And it counts pounds as your application gets larger. But the worst part about the virtual DOM is no matter how little dynamic content you have in your template, you always have to walk through the whole tree to find out what has exactly changed".

Evan You

Evan You

Founder and Creator of Vue.js

Vue.js is now tracking the dependencies within each object of the DOM tree.

Virtual DOM in React

The virtual DOM in Vue 3.0.11 is tracking the dynamic elements only, which contain <p v-if="ok">.

React refined the rendering algorithm since its 16.0 version release

Evan You is right, saying that checking the nodes within the DOM tree is time-consuming. Compared to React, Vue has adjusted this technology. But could this difference be applied to the current version of React? To answer this question, we need to take on some research.

Virtual DOM in React operates based on reconciliation principle. As we already described, this concept implies creating and comparing virtual copies of DOM before changing the regular one.

The issue appears when we approach the JavaScript engine, which runs a web browser. It has to keep up a few processes together: reflect the functions within React app and update the DOM tree. At this point, let's recall that JavaScript executes all tasks in a single thread. It has to deal with the component functions like props and state updates and simultaneously make the changes to the whole DOM. If one process takes a longer time than expected, it affects another and leads to delays in animations.

For the circumstance when modern web applications, especially SaaS products, have graphic transitions, the described issue appears to be a crucial challenge.

Let's take a look at the below scheme. It showcases how the JS engine renders the content on the screen. The diagram is borrowed from the blog post "A Closer Look at React Fiber," published on the Alibaba cloud community website.

rendering-in-browser

A browser gradually renders the information on the screen, frame by frame. This job needs to handle a significant amount of work; let's see how it goes on:

  • input event, gets back feedback to the visitor as soon as possible;
  • timers, tracks the time of performance and runs a callback function;
  • begin frame, checks the events for every frame, such as window resize, scroll, media query;
  • requestAnimationFrame, executes the self-name function, having performed the call back before that;
  • layout, which responds to the style and position of a certain layout;
  • paint, fills out the elements within each node, ensures their size and location;
  • idle period, executes the tasks registered in requestIdleCallback.

You may have noticed that the list involves various functions. If anyone takes longer than 16ms to complete, the graphic on the page screen will be interrupted. This will lead to page shuttering and poor user experience.

But since its 16th version, the React team has entirely rewritten the toolkit's core. Currently, it is called the React Fiber.

Dan Abramov explained this principle using the analogy of computer games too. During one of his online lessons, he admitted that the game designers were familiar with the problem when the screen wasn't filled correctly on the device. For instance, a bottom section could be updated earlier than the one on top. It seriously affected the user experience quality.

The solution which helped solve this problem is called double buffering. Game designers write a separate buffer instead of writing to the same one. And once the buffer is completed, they just swap them. So this is kind of how React works, starting from its 16th version.

React distinguishes the functions into those that affect the browser DOM and those related to props and state updates. Component updates are grouped into one category ("functions"), and lifecycle methods and DOM changes are combined into another ("side-effects").

With this help, programmers could prioritize the rendering work. The most consuming work like lifecycle operations could be postponed for the sake of an animation transition job. Meanwhile, the high-priority tasks could be arranged to one queue and split into smaller ones, or increments.

The mentioned solution becomes possible due to the implementation of work units or fiber nodes. Each fiber corresponds to a specific step within a rendering flow. Instead of a tree-like structure, it proposes a linear representation of data. It is easier to process and eliminates the time losses which Evan You referred to.

The linear structure of nodes is formed as an effects list. Dan Abramov likes to explain it by offering the Christmas Tree and lights analogy.

Imagine that we have a tree of fiber nodes. Each highlighted node is responsible for particular work.

tree-lights-analogy

As shown in the example, the recent update reasoned c2 to be added into the DOM, d2 and c1 to change attributes, and b2 to fire a lifecycle method. The effect list will link them together so that React can skip other nodes as less priority.

React uses the firstEffect pointer to indicate where the list starts. In our case, it is applied to the a1 node. Hence, a linear effects list will look as follows:

react-fiber-flow-chart

The new linear approach enables React applications to prioritize the functions within one thread, use a scheduler to optimize the timeline and save the browser's resources.

With that said, we need to say that the virtual DOM algorithms in React have dramatically changed. It is different now from what Evan You explained in 2019. React was refined due to Fiber which encouraged many startups to move to this platform. For instance, Alibaba has chosen React, though it initially worked with Vue.js.

Summary on comparison of the virtual DOM processing:

  • Templating in Vue.js helps to represent a mini-DOM of a component. Instead of tracking each object, Vue.js goes over the dynamic parts in templates. So, it sufficiently optimized the operation of virtual DOM and leveraged the client-side rendering in Vue.js projects.
  • React utilizes Fiber technology which helps to avoid time-consuming tasks by skipping or postponing them. The developers received the ability to control the rendering process and adjust the performance during animation transitions.

Data binding of the components

While looking through the articles comparing React vs. Vue.js, you could find different views regarding the data binding. You could often read that React follows just a one-way data flow. Meanwhile, Vue.js provides just the two-way binding like Angular. That is not true.

Both React and Vue.js support the one- and two-way data flow simultaneously. Moreover, they suggest the one-way data flow as most preferred.

Let's get a look at the piece of documentation on Vue 3.0.11 that emphasizes the benefits of one-way data-binding:

"All props form a one-way-down binding between the child property and the parent one: when the parent property updates, it will flow down to the child, but not the other way around. This prevents child components from accidentally mutating the parent state, which can make your app's data flow harder to understand.

In addition, every time the parent component is updated, all props in the child component will be refreshed with the latest value. This means you should not attempt to mutate a prop inside a child component. If you do, Vue will warn you in the console."

Even though React components are designed for one-way flow, they could work with the two-way direction.

React supports callback functions so that the children components could fetch the props to their parents. For example, if a user is typing the text in the input field of the child component, these changes will reflect the parent and update its content.

React data binding

With that said, the React community is provided with react-hook libraries, which enable two-way data binding.

Summary:

Vue.js and React support one-way as well as two-way data binding for components. In general, one-way data flow helps establish better control of the project functionality. Both frameworks recommend it as the best option.

Brief industry comparison of React and Vue.js

React

React.js is flexible and open to a variety of choices. It doesn't imply any opinionated direction or mentality for development. However, this approach has some cost because the developers need to have a strong knowledge of JavaScript and be experienced with Single page applications (SPA) design.

Pros of React:

  • Fast client-side rendering.
  • Good control of the data flow.
  • Light-weight architecture.
  • Extensibility and scalability.
  • Large community support.

Cons of React:

  • Steep learning curve.
  • Does not operate without other libraries and services, like Redux, routing, etc.
  • Structure-free code may get to spaghetti and boilerplate.

What companies should choose React:

  • Early-stage startups that need fast feature development and validation campaigns on the market.
  • Companies that are looking to outsource their development. It is much easier to find a React developer compared to the one with Vue.js expertise.
  • Product-based companies will also require cross-platforming app development (React Native based on React technology, that it will be a good fit).

Vue.js

Vue.js combined the top-level features of React and Angular, but its main feature is the perfect user experience. Also, it leveraged the capacity of the virtual DOM and optimized the code structure.

Pros of Vue.js:

  • Developer-friendly framework.
  • Outstanding performance.
  • Well-structured code.
  • Elegant language syntax.
  • Fine user documentation.

Cons of Vue.js:

  • Lack of experienced developers.
  • Small community.
  • A big part of the documentation is written solely in Chinese.

What companies should choose Vue.js:

  • Companies that approach the market of web-based products.
  • Companies that are looking to implement a single flow in their development process.
  • Companies with no previous experience of using frameworks in their build process or those looking to leverage their proficiency with JavaScript.

Top 10 companies that built their projects with React:

  • Atlassian (Jira, Trello)
  • Codecademy
  • Dropbox
  • Netflix
  • Airbnb
  • Facebook
  • Instagram
  • Twitter
  • Reddit
  • Alibaba

Top 10 companies that constructed their projects with Vue.js:

  • Behance
  • Dribbble
  • Adobe
  • GitLab
  • Namecheap
  • Grammarly
  • Nintendo
  • Zoom
  • Louis Vuitton
  • Google Careers

Useful resources

You may find these materials helpful

Articles and tutorials

  1. React: Making faster, smoother UIs for data-driven Web apps, by Paul Krill, InfoWorld.
  2. DOM benchmark comparison of the front-end JavaScript frameworks React, Angular, Vue, and Svelte, master’s thesis in computer science by Mattias Levin.
  3. What is Vue.js?, What is React? | Tutorials at W3schools.
  4. A Closer Look at React Fiber, by Lenghui from F(x) Team.
  5. Inside Fiber: in-depth overview of the new reconciliation algorithm in React, by Max Koretskyi.

Podcast shows

Videos on YouTube:

  1. Design Principles of Vue 3.0 by Evan You.
  2. Differences between Vue and React (an interview with Sara Vieira).
  3. Tech Talk: 1 vs 2 way Data Binding in React and Angular (Matthew Elmquist for Fullstack Academy).
  4. SMOOSHCAST: React Fiber Deep Dive with Dan Abramov.
4.64
Thank you for reading! Leave us your feedback!
25843 ratings

Read more on our blog