Should you prefer React over Vue.js

React and Vue.js are the two most popular modern tools for designing web interfaces. Nevertheless, Vue.js claims to be the framework, and React claims to be the library, they share more in common than, for example, Angular, which is a “true” framework.
So if these two tools are so similar at the first glance, which should you choose if you have a chance to make a technical decision? Let’s find that out.

History

React

React was born in the slums of Facebook as a tool for a real purpose. The Facebook team was unable to scale with their current internal processes. With the increasing demand for new features the team grew, but then it faced difficulties performing “cascade updates”. [1] React was the rescue for this issue, however, it was a private tool for a while, and it evolved through multiple stages prior to its public release in 2013.

Vue.js

Vue.js was also born as a tool for a real purpose. It was created by Evan You to simplify internal prototyping.
However, it was influenced by both Angular and React [2]. Looks like Vue.js still takes inspiration from React.
At the time Vue.js was born, in 2014, React was relatively young and had licensing ambiguity [3] which was solved later.

Similarities

React and Vue.js are pretty similar, both in their internals and usage. They even have similar popularity on GitHub (189k vs 197k stars), however, according to NPM installs React is much more popular (weekly installs for React 14M vs Vue 3M).
Both tools are using VirtualDOM internally for the best rendering performance.
Both tools initially used “lifecycle-style” components, and then gracefully moved to what React named “hooks” (since version 16.8 in February 2019). This is now a recommended approach, but both tools have great BC and allow us to use an old API too.
Vue.js' answer to the “hooks” was “Composition API” [4] and this was implemented with Vue.js 3 in January 2020.

Starting using hooks, or Composition API requires developers to change their mindset, and sometimes it can face resistance and misunderstanding, but once developers master this approach, it leads to more cohesive, and so more maintainable code.
Both libraries have great dev tools (i.e., for Chrome: React, Vue), routing, state management systems, and TypeScript support.
However, state management and typescript support are the places where those tools start to differ.

Differences

Typescript support

It is hard to imagine developing the middle- and large-scale modern frontend applications without TypeScript.
React uses JSX language (another fancy js-extension) which has great Typescript integration (and then JSX becomes TSX). Every React component is JSX (or TSX) entity, which has entire JS features set with some html/dom-like extensions. [5]

Vue.js uses a slightly different approach. It suggests using “Single File Components” which is “a special file format that allows encapsulating the template, logic, and styling of a Vue component in a single file.” [6]
The good thing here is that the JavaScript part of the .vue file can actually be a pure TypeScript script. The bad thing is that the template is a separate part of the Single File Component. TypeScript features, i.e. type checking, are not available here. There were some attempts to mitigate this problem [7] however they were complex and unstable. 

State management

Vue.js can be easily used with Vuex (later rebranded to Pinia) - a state management library. Vuex is simple in usage but powerful. It also has a decent way to separate concerns by splitting logic into modules.

React provides the ability to manage the global state without additional libraries with Context. [8] However, it is not recommended for states with frequent changes.   
For this purpose React developers use Redux (like Vue.js developers use Vuex/Pinia for Vue.js).
State management with Redux is slightly more difficult. It’s not that it is more difficult to use it - actually, the core principles of Redux are simpler. However, you need to be familiar with some functional programming concepts, i.e. immutability, to truly understand it. The good news here is that with @reduxjs/toolkit it is relatively easy to use Redux even without understanding some internals regarding reducers etc. 

Strong sides of Vue.js

Vue.js has one, but very important benefit over React - it’s imposed a Single File Component system. Probably, exactly because of this feature, Vue.js is called a “framework” and not just a “library”.
It is really convenient to build frontend applications with exhaustive components, which contain all behavior and view.
Furthermore, Vue.js components can (and should!) contain “scoped” CSS (and its derivatives, i.e. sass, less, etc) which will not affect any other component. [9] And all this is available right after the Vue.js installation. It requires some experience to get used to it to make it really beneficial, but once it is done, the application becomes more change-tolerable and maintainable.

Strong sides of React

React has all the required tools and abilities to create well-typed frontend applications with TypeScript, with no exception for templates.

One more solid React feature is a separated renderer. When you use React on a webpage, typically that means that you install react-dom [10] or its client or server rendering subset. This package flushes changes from virtual DOM to browser DOM.
But that is not the only possible renderer. Another good example is React Native. It compiles js code to native Android or iOS applications. Unlike Cordova/Ionic etc. approaches, it doesn’t use webview.

Nevertheless, React Native uses different components (not DOM components), it is still React, and it is a relatively simple transition to Android/iOS development.

React also has a very large community, which already solved the most common problems. If we compare stack overflow popularity or surveys, React is the true winner. [11]
A large company (Facebook) behind it also gives the feeling of reliability.

Weak sides of React

Like with every tool being used for development, the story about React would be incomplete if we don’t mention its downsides.
Compared to Vue.js, React doesn’t have an established way to work with styles (CSS, SASS, LESS, etc). That is by design, React claims that it is not its task. [12]

Nevertheless, it seems fair and appropriate, if we talk about a real-world scenario, that is a place where developers should make another decision (CSS modules, CSS in JS, etc) which requires additional expertise, compared to what Vue.js provides out-of-the-box.

Conclusions

Both tools, React and Vue.js are mature and popular and used by large and small companies. Vue.js seems to be slightly more beginner-friendly, its Single File Component approach is good for separation of concerns and is a good way to “just start and develop”.
However, React is more widespread, more scalable, has better documentation (split by knowledge levels and translated into many languages), and in general more discussable in communities (i.e. stack overflow). It has better TypeScript integration (Vue.js has issues with its templates and TypeScript).

When to pick up React for sure

• Your team is experienced with React
• Your app needs to be scalable
• You want to develop native Android or iOS applications in a very similar way
• You want to have fair TypeScript support for all parts of an application 

When to pick up Vue.js for sure

• You need to create a relatively small project or a prototype and your team is experienced only with Vue.js
• Your team doesn't have an extensive frontend dev experience