Vue vs React: Which is the Better Framework? (2021 Update)

Posted by Ben Rogojan on December 5, 2019

GSD

When it comes to picking Javascript frameworks and libraries, developers are presented with many options. Still, React and Vue remain two of the most popular choices.

The most challenging part is deciding whether to use React or Vue in your tech stack. The two frameworks are similar in a couple of ways. Both use a Virtual DOM, and both possess a reactive and component-based structure. 

This article, updated for 2021, will articulate the strong points and shortcomings of the two technologies, allowing for more clarity into the popular frameworks and which one is most favorable to you as a developer and the growth of your business. Read on to discover more insights about Vue vs React for 2021. 

undefined

What is React?

React logo

React (or React.js) is a front-end JavaScript library made by Facebook that lets developers build user interfaces at scale. It's open-source and supports modularity through components, so developers typically use it to build single-page web and mobile applications. 

React: Features at a glance

  • Open-source
  • JavaScript library
  • MIT license
  • Virtual DOM
  • Documentation
  • Community
  • Component library for mobile apps
  • Launched in 2013
  • JSX syntax
  • Used by Twitter, Uber, and Netflix

What is Vue?

Vue.js logo

Vue (or Vue.js) is also a front-end JavaScript framework used for creating UIs and single-page web and mobile applications. This open-source framework uses a process called 'high decoupling.'

Vue: Features at a glance

  • Open-source
  • JavaScript framework
  • MIT license
  • Virtual DOM
  • Documentation
  • Community
  • Component library for mobile apps
  • Launched in 2014
  • HTML/JSX syntax
  • Used by Grammarly, Alibaba, and Vice

When should developers use React?

  • If you're thinking about building complex single-page applications over a long period of time. With React there's the option to use HTML and JSX, which makes it a better fit for enterprise-grade applications.

  • If you prefer to use JSX! While React gives you the option to use standard HTML, it's more focused on JSX, which tracks updates and changes to HTML. That means there's no rewriting.
  • You want to create larger apps. You'll have to use third-party tools, but React gives much more scope for larger-scale app projects.

When should developers use Vue?

  • If you want a fast solution for building UIs. Vue is extremely useful up to a certain point, but its over-reliance on HTML templates makes it a more laborious experience than React in the long term. (More on that later.)
  • If you prefer to use HTML! Some developers favor HTML, which remains the de facto markup language for websites. 
  • You want to create smaller apps. Vue utilizes something called a ' store pattern ' for state management, which, unlike React, requires no third-party tools.

Learning curve: React vs Vue

Illustration: Two people presenting a chart with React and Vue logos

React adopts the JSX format, where HTML is written in JavaScript. Although JSX is in line with functional programming, which is a pretty neat concept, developers are saddled with the responsibility of figuring out this new approach.

React is lean at its core, and is heavily dependent on other third-party components for effective use. This could also be a pain for developers since they may need to grasp a lot of new information just to get things done.

While React’s documentation is good, Vue’s documentation is largely considered better.

Vue is easier to learn compared to React. Vue separates concerns in a way that web developers are already used to, decoupling HTML, CSS, and JavaScript. It also allows the use of JSX, for developers who prefer to adopt that style.

Vue is also easier to get accustomed to because it picked out the good parts of React and Angular, thus making it easier for developers from either of the two backgrounds to fit in perfectly.

Vue documentation is also very well written and attempts to answer most (if not all) questions that could possibly come up.

Read More: Building a Beautiful Animated News App with Vue.js and Vuetify

Development of frameworks

React

Unlike some tools in your tech stack, there's no pattern as to when React releases different versions of its framework. As of 2021, the most recent major stable release is React v17.0, which came out in October 2020. However, this version didn't come with any new developer-facing features. Instead, React rolled out various upgrades. Some users encountered problems when upgrading from Reach 16 to 17. 

There are already plans for React 18

"We’re fixing many of those problems with React 17. This means that when React 18 and the next future versions come out, you will now have more options," said React on its website. "The first option will be to upgrade your whole app at once like you might have done before. But you will also have an option to upgrade your app piece by piece."

Vue

Vue releases far fewer versions of its framework than React does. The most recent major stable release is Vue 3.0, which came out in September 2020. Features include:

  • Enhanced TypeScript integration
  • New APIs for enterprise-use cases
  • A smaller bundle size
  • Performance enhancements

Performance

Both React and Vue interact with the DOM; every time DOM elements are removed or added, updates are made to the Domain data. This interaction is a metric for measuring performance.

In the following table, all durations are in milliseconds.

Metric vue-v2.5.16-keyed react-v16.4.1-keyed
Create Rows
Duration for creating 1,000 rows after the page loaded.
182.1 ± 7.6
(1.0)
180.5 ± 7.3
(1.0)
Replace All Rows
Duration for updating all 1,000 rows of the table (with 5 warmup iterations).
158.8 ± 2.7
(1.0)
157.3 ± 2.0
(1.0)
Partial Update
Time to update the text of every 10th row (with 5 warmup iterations) for a table with 10,000 rows.
156.4 ± 9.8
(1.0)
81.9 ± 2.7
(1.0)
Select Row
Duration to highlight a row in response to a click on the row (with 5 warmup iterations).
10.6 ± 2.0
(1.0)
10.3 ± 2.1
(1.0)
Swap Rows
Time to swap 2 rows on a 1,000-row table (with 5 warmup iterations).
20.0 ± 2.9
(1.0)
106.5 ± 1.9
(1.0)
Remove Row
Duration to remove a row (with 5 warmup iterations).
54.2 ± 2.2
(1.0)
49.6 ± 0.8
(1.0)
Create Many Rows
Duration to create 10,000 rows.
1,603.2 ± 34.8
(1.0)
1,935.4 ± 33.6
(1.0)
Append Rows to Large Table
Duration for adding 1,000 rows on a table of 10,000 rows.
342.5 ± 6.0
(1.0)
268.6 ± 6.9
(1.0)
Clear Rows
Duration to clear the table filled with 10,000 rows.
191.9 ± 6.1
(1.0)
175.4 ± 4.1
(1.0)
Slowdown Geometric Mean 1.00 1.00
Performace data via Stefan Krause

From the chart above, we can see that React and Vue carry out the same manipulations within almost the same timeframe. The performance differences between Vue and React are almost negligible, with a difference of just a few milliseconds for most metrics.

This is proof that in relation to performance Vue and React are quite similar. 

See how ButterCMS works with any tech stack.

Tooling and libraries

State Management

React can handle state management from within using setState() to set a component’s state. However, for applications with the possibility of increased complexity and robustness, developers use packages like Redux, Mobx, and the React Context API to manage state. None of these packages are managed by the core React team.

Redux

import { createStore } from 'redux';
import reducer from './reducers';

const store = createStore(reducer);
function render() {
 ReactDOM.render( … );
}

store.subscribe(render);
render();

Vue, on the other hand, uses a `store pattern` for state management when the app to be built is relatively simple and small. However, for large-scale SPAs where many components are in dire need of a shared state store, Vue provides a Flux-like architecture called Vuex with a centralized store.

Vuex

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})
store.commit('increment')

console.log(store.state.count) // -> 1

Vuex is developed and managed by the Vue team and is tailored for Vue users. It is very specific in its state management abilities.

Routing

For routing, React uses theReact-Router library, which is also not managed by the React team. The react-router library smoothly synchronizes the components of an application with the URL.

React Router

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router, Link, Route } from 'react-router-dom'

const Home = () => (
  <div>
    <h2>Home</h2>
  </div>
)

const Contacts = () => (
  <div>
    <h2>Contacts</h2>
  </div>
)

ReactDOM.render(
  <Router>
    <div>
      <aside>
        <Link to={`/`}>Home</Link>
        <Link to={`/contacts`}>Contact Us</Link>
      </aside>

      <main>
        <Route exact path="/" component={Home} />
        <Route path="/contacts" component={Contacts} />
      </main>
    </div>
  </Router>,
  document.getElementById('app')
)

Vue has a routing library called Vue-Router. The Vue Router is the official router for Vue, even though there are a few other third-party routers like Page.js and Director, and it is extremely seamless to use with Vue.

Vue Router

<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/contacts">Contact Us</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>
<script>

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(Router)

const Home  = {
  template: '<div>Home</div>'
}

const Contacts = {
  template: '<div>Contacts</div>'
}

const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/contacts', component: Contacts }
  ]
})

new Vue({
  router
}).$mount('#app')
</script>

It is also possible to handle routing without any library, but this is only efficient for apps that need only simple routing.

CLI

For easy access to a development environment, React provides a CLI that makes it easy to start a react project. It is called Create-React-App.

Vue provides a resource called Vue-CLI which gives developers the ability to quickly begin new Vue projects. The Vue CLI comes already customized, and lets you add plugins anytime during the development lifecycle.

Mobile and desktop development

React Native is React’s awesome platform for building native Mobile Applications that work for both Android and iOS. This is awesome because React developers can leverage their knowledge to build mobile apps.

Vue, at the time of writing, is partnering with Weex, a cross-platform UI framework to develop a platform that would function like React Native. Presently, Vue has a NativeScript plugin called NativeScript-Vue for building native applications in Vue.

Illustration: Two people placing Vue and React logos on a mobile phone screen

For building cross-platform desktop applications, Vue can readily be used with Electron. Using the Vue-CLI as scaffolding, Electron-Vue provides a boilerplate where internal configurations have already been taken care of.

Read more: React vs. React Native: Differences, Advantages & Limitations

Server-Side Rendering (SSR)

SSR provides greater visibility for websites when Google crawls sites for its results pages. It can also improve the user experience. Vue has in-built SSR features, and there are clear instructions on how to use these capabilities in its documentation. React requires a third-party library for SSR. This might not bother you, however, as SSR isn't as important for search engines as in the past. 

Scalability

React is lighter than Vue so handles multi-page applications with ease, allowing you to scale the tool as your website or application grows. Just import the library and add JS features direct on React. Then use a third-party form package and routing tool. 

You can also scale pretty seamlessly (up to a certain point) with the Vue CLI, which boasts various templates for single-page applications. As your website scales, add additional templates from community developers and customize them the way you like. You'll still need to use a routing tool and form package to scale on Vue, which most developers will find easy at first. However, the option to use JSX syntax on React proves more useful in the long term, especially when using HTML templates becomes a chore. 

Vue and React community

Being backed by Facebook, React has a very large community compared to Vue. Presently, React has over 288,000 questions on StackOverflow. It also has over 68,000 npm packages. 

React’s community, though large, is very fragmented because of the freedom given to developers to adopt whatever structure suits them. This liberty is the cause of an underlying confusion, hence the large number of questions recorded on StackOverflow.

React presently has 165,000 stars on Github, about 15,000 stars less than Vue's 180,000.

Analytics from GoogleTrends show that in comparison to Vue, React has an advantage in search relevance over the past 12 months.

React vs Vue - Google Trends
Data via Google Trends

Evan You owns Vue.js and manages it with his team. Since its release in 2014, its community has grown competitive with React over time and remains promising. There are more than 74,000 questions on StackOverflow tagged Vue.js, and there are about 24,000 npm packages. Vue has above 180,000 stars on Github.

Vue vs React: Popularity Over Time
Data via stateofjs.com

Discover how ButterCMS works with any tech stack.

Vue and React: Jobs and hiring

The large community base that React has and the number of questions on StackOverflow, translate to a large pool of React developers. React has more available developers in comparison to Vue.

However, as the report from stateofjs above indicates, there are also a lot of developers interested in learning Vue. Over the next few months and years, the Vue developer count will likely continue to increase.

A recent search on StackOverflow shows that a React developer could earn as much as $150k while a Vue.js developer could earn about $90k. It also shows that there are more React jobs than Vue jobs. 

Read more: Comparing Angular vs Vue

Vue vs React: What developers say

React

Developers on StackShare.io rated React's components as its best feature, followed by its virtual dom and performance.

On TrustRadius, where React has an average user score of 9/10 based on 62 reviews, one developer said:

"[React has an] intuitive templating language (JSX) that provides a dynamic rendering of HTML elements, along with an easy model to tie back to JavaScript implemented in your components. [There are] component-based views that guide the developer to modular and reusable pieces to your interface." (Erik Ralston)

Illustration: Vue vs React boxers fighting

Another developer said:

"React is designed around the notion of generated HTML as opposed to templated HTML. This provides more flexibility in building elements on a page and allows developers to create HTML that is programmatically configured based on runtime considerations." (Larry Reed)

Another developer said: 

"React could get very frustrating unless you start thinking in React. React enforces a top-down hierarchy of data flow and offers no way for the data to communicate backward. This is a big shift in mindset coming from Angular 1.x. This constraint is really a big factor that determines how to organize your code and how you might want to write your own components." (Anudeep Palanki)

Vue

Developers on StackShare.io rated Vue's simple and easy-to-use interface as its best feature, followed by its documentation and components. 

One developer said:

"I find using Vue.js to be easier (more concise / less boilerplate) and more intuitive than writing React. However, there are a lot more readily available React components that I can just plug into my projects. I'm debating whether to use Vue.js or React for an upcoming project that I'm going to use to help teach a friend how to build an interactive front-end." (Cyrus Stoller)

In a comparison between React vs Vue, JetRuby Agency said:

"One of the coolest things Vue.JS has borrowed is the idea of using virtual DOM. In simple words, virtual DOM is a lightweight copy of DOM, which allows you to manipulate objects without having to draw them on the screen. Every time you render an element, every single virtual DOM object is updated. When you update the virtual DOM, React compares it with its previous version."

What the makers say

React

"React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes."

Vue

"An incrementally adoptable ecosystem that scales between a library and a full-featured framework."

Alternatives to React and Vue

React Lite

A lighter version of React.js with fewer features. However, there's no compatibility package requirement so developers can use this tool directly with a web-pack alias. 

Inferno JS

Released in 2016, Inferno JS supports JSX, hyperscript, and the Vanilla createElement method, as well as state management libraries like Redux and MobX.

Angular JS

Created by Google, Angular JS is a front-end JavaScript framework that's open-source, similar to React and Vue. Developers can build single-page websites and applications by dynamically writing pages. 

Use a headless CMS for Angular JS

Aurelia

Written in ES2016, this tool integrates with web components and lets developers create applications with all or selected modules. 

Other features include two-way data binding to objects and an extensible HTML compiler for developing control template generation and custom HTML elements. 

Riot JS

Riot JS lets developers create UIs with custom tags and benefit from a powerful virtual DOM. Some developers might find Riot easier to use than React and Vue because it doesn't require additional HTML root elements or custom/data attributes. 

Vue vs React: Conclusion

Illustration: Two people standing in a fighting position

React and Vue are very good JavaScript technologies, great choices, and very useful for both small and large-scale applications.

React offers flexibility, a hot job market, and is as stable as Vue. Yet Vue is more structured, easier to figure out and set up, resulting in reduced project duration and overtime if CTOs introduce Vue.js as part of their developer stack. They both work really well with a headless CMS like headless WordPress or ButterCMS.

Vue offers clarity resulting in predictions that the framework will eventually catch up to React and could become the first choice for developers.

ButterCMS is the No.1 headless CMS for Vue and React because it's built for developers like you. Sign up for a FREE trial

Sign up to receive tutorials on Vue and React.
    
Ben Rogojan

Ben works as a data scientist and technology consultant helping companies design, develop custom software as well as make good decisions on their future tech strategies. He enjoys writing and teaching others about all forms of technology wether it be about automation and machine learning models or CMSs.

ButterCMS is the #1 rated Headless CMS

Related articles

Don’t miss a single post

Get our latest articles, stay updated!