At Codica, we consider Vue.js and ReactJS among the most rapidly developing tools for the front-end development for many reasons. While these technologies can help create the same products and applications, both of them have pros and cons.
The purpose of this article is to compare Vue.js vs React.js in different aspects: from general information to technical features. Both these web development tools have mature communities, wide support and popularity, but Vue.js is a framework and React is a library. So, why do we compare oranges and apples?
Why React and Vue: tools overview
One of the key factors for the comparison between React and Vue was that Evan You, Vue.js framework creator, used ReactJS as a source of inspiration for new framework development.
I figured, what if I could just extract the part that I really liked about React and build something really lightweight without all the extra concepts involved? I was also curious as to how its internal implementation worked. I started this experiment just trying to replicate this minimal feature set, like declarative data binding. That was basically how Vue started. - Evan You
We will start our comparison of the two most popular technologies in question with a brief overview. Check the table below to learn the basic info about Vue vs React.
|React and Vue: General Info|
|Creator||Facebook/Jordan Walke||Evan You|
|Popular websites / apps|
These web development tools are particularly similar to each other. We can behold it even from Vue.js official documentation, where such similarities are displayed. The main initial common points are:
- Virtual DOM (Document Object Model);
- Reactive and component-based structure;
- Support of TypeScript;
- Core library and supporting libraries;
- Seamless version migration;
- Backward compatibility;
- A great variety of libraries and tools;
- PWA support;
- Flexibility, performance, and speed;
- Big, active communities.
Both technologies implement unidirectional data flow. It means that data binding moves from parent to child. So, downward data binding means that children keep their content unless it is changed. This ensures clean data flow architecture.
Another difference comes with the approach to rendering content to Document Object Model. While React uses JSX exceptionally for creating React components, Vue uses HTML templates apart from JSX.
Finally, React and Vue differ in terms of pre-built and third party tools. React comes with competent architecture, Virtual DOM manipulation, and component state management. All other functionality is built and supported by the community members.
As a result of this approach, developers get more freedom. At the same time, new developers may find an abundance of third-party instruments challenging.
When it comes to Vue, its widespread tools and libraries are developed by its core team. In addition to them, there are community-based solutions as well.
To conclude, Vue has a more balanced combination of third-party and pre-built tools that satisfies the needs of both experienced developers and newbies.
The most popular web apps created with React and Vue
React helps deliver accurate search results in websites handling massive data, like social media. Building complex websites with React, developers ensure high startup speed and runtime performance. The library also allows developers to speed up the website development process and deliver a native user experience.
As for Vue, it also has advantages for creating websites. The framework can be used for automatic tagging and finding pictures, responsive administration boards, and content management platforms. These are just a few use cases for the versatile Vue framework.
Below you can see the websites that use React and Vue and deliver interfaces that users enjoy.
What’s new in React in 2022?
The React 18 version looks like a great release. In general, this release is feature-rich, easy to use, and gives the community more influence over the development process. Let's dive in and explore all the new features in detail!
This option was introduced in React 18. Concurrency in React means that two tasks can be in progress at once and prioritized depending on urgency.
In the past, React could perform only one task at a time. If the task started, you could not interrupt it. That was blocking rendering. The concurrent mode was created to fix that problem and make it possible to interrupt and resume tasks.
In the latest React 18 version, the concurrent mode was replaced with concurrent features. They are the foundation for concurrent rendering. These features help you set states as non-urgent to keep the better performance of your app. So the app performs better and your browser stays responsive.
Previously, batching was possible only for event handlers. Now, it is possible to batch promises, timeouts, and native event handlers automatically.
Automatic batching groups state updates in a single re-render. Thus, automatic batching streamlines the app updating with new data and improves the app performance.
This is a new concept, and it defines how objects can behave in the app. They can be urgent or non-urgent. It means that a user expects or does not expect an immediate change.
For example, when clicking a button, a user expects an instant response in the UI. Meanwhile, the change of page look allows for a delay in action. This is where transitions are expected.
You can use transitions to tell the app where the updates start, how they change, and the results to show.
It is worth noting that non-urgent events can be interrupted by urgent ones. For example, if a user clicks a button, React will stop the non-urgent work and render only the latest updates.
If the data stop again, transitions will prompt React to show current content while delivering the transition content at the same time.
New APIs: Suspense, client-side, and server-side
React 18 introduces several features allowing for concurrent states. It is useful for weak devices and poor connections.
While a user waits to load content, the Suspense API lets them know that the content is on the way. The Suspense API allows developers to create apps that have more responsive UI and take less browser capacity. In the latest version, Suspense works best with transitions.
The new client methods show when React recovers from errors. On the server side, new APIs streamline the Suspense processes on the server. The renderToString method still works but is not recommended to use.
New strict mode behaviors
Strict mode is a development-only check. It helps destructure and restructure components and restore previous states the second time. Strict mode provides the following benefits:
- Eliminating mutations of values that lead to different results after each render;
- Facilitating work with the code written by other developers;
- Detecting programming bugs;
- Ensuring clean code following the best React practices.
To sum up, strict mode shows issues in the programme helping streamline the development process. See more info here.
What’s new in Vue in 2022?
As of 2022, the Vue 3 version is the new default. According to its creator, Evan You, Vue 3 is faster, smaller, easy to maintain, and simplifies target native. There are following updates compared to previous framework versions.
The new approach to APIs allows you to write components based on functions. This method was inspired by React Hooks. Composition functions will embrace logic and reuse it across components. Check this API reference for more details.
It is another way to write component states and logic compared to Options API. With Composition API, you use imported functions. Meanwhile, Options API requires declaring options.
Composition API changes the way we use Vue. It brings more flexibility and scalability. Still, they are compatible with the Vue 2 syntax, options-based API. Therefore, if you decide to use the new approach, your code still will be compatible with older projects.
Though Composition API improves the development process, the authors declare that options API will not be deprecated. This is because it is a part of Vue, and developers gladly use it. Below you can see the advantages of Composition API.
Vite is a lightweight build toolchain created by Evan You. It powers the Vue 3 official build setup. Vite comprises a module bundler that will bundle your projects. Vite replaces Vue-CLI (Command Line Interface), which is in maintenance mode from now on. So, it is recommended to start projects with create-vue based on Vite, unless you rely on specific webpack features.
Pinia is a state management library for Vue and is now declared a default. Still, it works with both Vue 2 and Vue 3. The library allows you to declare a state among components and pages. It is intuitive and fully typed.
Pinia replaced Vuex for state management. You can still use Vuex, but it is in maintenance mode. So, it will not gain new features. The recommendation is to use Pinia for new web apps.
- It weighs only 1 KB and will not affect the app performance when added.
- It is compatible with Vue 2 and Vue 3 devtools giving the best developer experience.
- It is made simple, meaning less boilerplate code and concepts to memorize.
- It autocompletes data types.
- It has a plugin system that extends its default capabilities.
- It is modular by default and allows the code split if needed.
Other changes in Vue 3
Improvements in Vue 3 also embrace the following:
Smaller Vue core. This size improvement has been reached thanks to code modularity, smaller core runtime, and a tree-shaking-friendly compiler.
Virtual DOM rewrite. Portals are now called Teleports. These features help render the components within the Virtual DOM tree to different places. Teleport is helpful when you work with elements sensitive to placement in the Virtual DOM tree. They include popups, notifications, and modals.
Vue vs React: detailed comparison
Let’s dive into other aspects to get better acquainted with React and Vue and compare them in detail.
When choosing the right tools for your web development project, select mature technologies that have already proved themselves.
When using immature tools, there exist certain risks, for example:
- Bugs or vulnerabilities.
- Insufficient knowledge base or small community in case you need help.
As for the maturity of the technologies in question, they were created around the same time. ReactJS was developed and released by Facebook in 2013, while Vue.js was released in February 2014.
As you can see, both Vue and React have been used long enough to become mature tools. During this time, their initial flows were removed and the technologies have been improved significantly.
Popularity and community
So which technology is more popular: React or Vue? To answer this question, let’s check the results of the latest survey State of JS 2021.
Developers retention and interest
Here we can see that React slightly outperforms Vue in terms of retention and interest among JS frameworks.
Developers’ attitude towards Vue and React
Also, developers express their positive attitude toward using both of these technologies:
Most wanted frameworks
Stack Overflow Developer Survey 2022 is also a reliable source of valuable insights into popular technologies.
The recent findings show that React and Vue rank first and third in the list of the web frameworks the most wanted by professional developers.
Most commonly used frameworks
However, if we take a look at the top of the most commonly used web frameworks, we will get a bit different results. React takes the second place, and Vue lags behind.
Popularity on Stack Overflow and Github
Another factor that speaks to the popularity of any given technology is a number of questions asked on professional forums.
The ReactJS community is much bigger than that for Vue.js. However, the main problem refers to React’s fragmentary nature. So, it’s more complicated to get feedback on common questions.
On the flipside, Vue is a progressive lightweight framework that allows you to develop web applications easily and fast. Vue.js is also much easier to learn for new developers, as it takes less time and the learning curve is much lower.
Finally, the last criteria for comparing Vue.js vs React is the number of package downloads.
Below you can see the statistics on npm packages download counts over time provided by npm trends:
Development speed and cost
Our experience shows that Vue.js and React have similar development speed. The thing is that there are many additional libraries, frameworks, and packages that help you build the application rapidly. Everything depends on the developers’ coding experience and skills that allow tilting toward ReactJS or Vue. But actually, the time estimates for similar tasks are exemplarily equal.
The cost depends on many factors, such as developer experience and seniority level, location, etc. So, it can vary greatly. To have some numbers in mind, we are adding the average cost from the Codementor platform for both React and Vue.js.
ReactJS developers average rates:
Vue developers average rates:
Therefore, the rates of React developers are slightly higher than the rates of Vue developers.
React provides an official tool called Create React App. It helps developers accelerate such work aspects as user interfaces development, adding scripts, and installing necessary dependencies.
Before the Create React App was released, developers had to copy the Webpack-config and other .rc files from previous applications each time they started a new web application, or configure everything manually. Without using Create React App, you had to put the same configuration from one project to another. It did not take much time but was actually boring.
The Create React App provides a CLI interface for building applications with a basic structure. It installs all the necessary dependencies, and adds scripts to the package.json to run, test, and build the application.
Indeed, ReactJS gains huge support for the main IDEs.
Older versions of the Vue.js framework suggest Vue-CLI, which is a tool for quick project creation. Such projects have a ready-made structure, an installed configuration, as well as a number of basic files. Today, it is recommended to use create-vue based on Vite, instead of Vue-CLI based on webpack. Vite supports the advantages of Vue-CLI and offers better development speed. Use the create-vue scaffolding tool to intialize Vite.
Vite is a new default now. So, Vue-CLI can stay for old apps, but if you build new Vue apps, you need to use Vite.
React centers around UI, so initially, you get help in building UI components. Its XML-like syntax allows the creation of UI components with the included instructions for view.
However, ReactJS does not provide you with state management. When you are dealing with React, you can use Context API out of the box. This helps you to manage the state. Keep in mind though that this method suits small applications best.
For state management in more complex web apps, you can use third-party libraries provided by React in abundance. The most popular libraries are Redux, MobX, Recoil, and Zustand. Redux is considered the best, built on the Flux architecture pattern. Experienced developers appreciate libraries and can choose the best one for a particular project.
Moreover, speaking about React router - it is not an official package, but also a third-party one.
You may also like: The Power of CSS Processors in Web Applications Development
As a dynamic framework, Vue.js permits simply utilizing its most basic tooling to create an application. However if necessary, it additionally offers the vast majority of all the functionalities that you may require:
- Pinia or Vuex for state management.
- Vue Router for application URL management.
- Vue.js Server-Side Renderer for Server-Side Rendering.
To sum up, Vue is more intuitive than React both for small and large applications.
Related reading: How to Make a React Progressive Web App Application (PWA)
This approach is widely used for delivering mobile experience to users by the world’s best businesses, including Alibaba, Twitter, and others. Speaking about our experience, we have successfully delivered multiple progressive web apps for many domains, including insurance, recruitment, ecommerce development and others.
Here’s an example of a Progressive Web App for an activity booking platform, built with React and Ruby on Rails:
In fact, almost all of the products that Codica Team delivers are PWAs. This not only saves time and cost for minimum viable product development services but also provides a solution which is fast and optimised for search engines.
- NativeScript has direct access to native platform API.
To compare the popularity and developers’ community usage of Vue.js vs React, let’s take a look at Google Trends Chart. It displays the data for the past 12 months.
To conclude, developers widely use React Native app development services. That means a bigger amount of ready-made solutions that are available for mobile development.
Generally, both Vue.js and React.js implement the same component approach in development when you have one file for one component. There are still some different aspects interesting to discover.
He points out that the separation of patterns and logic is simply a technology division, not a responsibility. You must create components instead of templates. Components are reusable, integrable, and convenient for unit testing.
Also, you can nest components inside of other components. Thus, you will create complex user interfaces with simple building blocks.
JSX is a great advantage for development, since you will have everything in the same place, and autocomplete and checks at the compilation stage will work faster. When you make a mistake in JSX, ReactJS does not compile the code and displays the line number in which the error was made.
Recommended reading: Deploying a Static Website on AWS Web Hosting with GitLab CI
The Vue framework offers “single-file components”. This is like a compromise regarding the division of responsibilities - templates, scripts and styles are not in one file, but in three different, ordered sections. This means you get syntax highlighting, CSS support and the ability to easily use preprocessors like Jade or SCSS.
Various sources state that JSX is easier to debug because Vue does not show syntax errors in HTML. This is not the case since Vue.js converts HTML into render functions - therefore errors are shown without problems.
Examples of component structure
Let’s get acquainted with the same component created for a To-Do List application both in React and Vue to see the difference between ReactJS JSX and Vue.js templates.
Vue component structure:
React component structure:
Vue vs React performance
Performace allows developer to create apps delivering the best user experience. To check the ReactJS and Vue.js performance, we turn to a great js-framework-benchmark that helped to compare both frameworks’ performance.
Duration in milliseconds ± 95% confidence interval.
|Vue and React Performance Comparison|
Create rowsDuration for creating 1000 rows after the page loaded
|52.6 ± 0.4||46.2 ± 0.5|
Replace all rowsDuration for updating all 1000 rows of the table (with 5 warmup iterations)
|53.9 ± 0.8||46.9 ± 0.7|
Partial updateTime to update the text of every 10th row (with 5 warmup iterations) for a table with 10k rows
|145.8 ± 4.7||121.9 ± 2.1|
Select rowDuration to highlight a row in response to a click on the row (with 5 warmup iterations)
|42.8 ± 0.9||22.2 ± 1.2|
Swap rowsTime to swap 2 rows on a 1K table (with 5 warmup iterations)
|175.6 ± 1.4||32.3 ± 1.0|
Remove rowDuration to remove a row (with 5 warmup iterations)
|58.0 ± 1.1||53.8 ± 0.6|
Create many rowsDuration to create 10,000 rows
|691.2 ± 3.7||492.0 ± 2.1|
Append rows to large tableDuration for adding 1000 rows on a table of 10,000 rows
|122.8 ± 0.4||99.7 ± 0.4|
Clear rowsDuration to clear the table filled with 10.000 rows
|45.4 ± 1.6||40.8 ± 1.3|
Startup timeTime for loading, parsing and starting up
|2,551.7 ± 49.4||2,101.5 ± 0.1|
To summarize, React has excellent performance, but both ReactJS and Vue are pretty close to each other. This is compared to particularly slow or especially fast development tools (like Inferno).
In general, both web development tools have similar approaches in managing the components’ state but still have some differences in immutability and other aspects. Let’s consider all of them.
It is difficult to create UIs, as states are present everywhere — data changes over time, which entails an increase in complexity. Certain ways of working with the state are of great help when the application grows and becomes more complex. For small applications, this might be a brute force, and something like Vanilla JS would be enough.
How does the state management work? Components describe a UI at a specific point in time. When data changes, the framework redraws the entire UI component - the data displayed is always relevant. We can call this idea “UI as a function”.
In other words: the application state is entirely in the object tree inside the unified storage. It helps to debug the application and some functionality becomes easier to implement. The state is in read-only mode and can be changed only through actions to avoid a race condition (also useful for debugging). Reducers are created to indicate how actions can transform a state.
Further reading: React App Development: UI, Styling, State Management, Testing
Codica’s projects created with React
Thanks to its advantages, React is our favorite for user interfaces of our projects. Its flexibility and robustness allow us to create apps with high performance and excellent user experience.
When we started custom e-commerce website development, we needed a tool that will help us handle two environments, B2C and C2C segments. So, we decided to use React. It ensures high performance and SEO friendliness of the web applications. Thus, we chose this library for the front-end part.
We implemented convenient search filters in this marketplace. They help users to walk through many product categories, filtering the interesting ones. Also, React helped us create an engaging signup form. When a user wants to register their store, they can go through the questionnaire and easily register their store on the platform.
Another recent project built with React was a real estate SaaS application. The website holds complex features, including 3D tours. They show you the full view of the property.
Thanks to the Jamstack approach including Gatsby and React technologies the solution works fast despite the significant volume of data it handles. We also ensured the excellent user experience with the front-end and back-end by applying the best development practices.
The platform holds rich functionality connecting homeowners, tenants, and agents. We included a convenient menu that allows you to add info on the crucial aspects of the property. If necessary, a tenant or an agent can communicate with a homeowner via an intuitive form.
React vs Vue: comparison summary
As we discussed above, React and Vue have common and distinguishing features. Let’s sum up how these two technologies relate.
As articulated earlier, React is to be chosen if you need to build up complex web apps, e.g. SaaS solutions, or an online marketplace for campers. It is an excellent tool for creating user interfaces.
Future maintenance and customization are much easier through the community volume. There is a large number of contributors and developers ready to build any application. Their total amount is greater than that of Vue.
Another reason to opt for ReactJS is the vast amount of libraries and tools that simplify and accelerate the development process. There is no need to write a function from scratch while the ready-made solution is available.
Recommended reading: Top Programming Languages to Shape Software Development in 2023
On the flipside, Vue.js is a good choice in case you are interested in creating lightweight and easy-to-fix web apps. The learning curve is lower. It allows new developers to master the framework in a short period of time and entering upon the application development.
The Vue community is smaller than React but it is growing at warp speed. Subsequent to contribution volume, the number of tools and libraries available grows as well.
Check our GitHub repository on Vue app best practices.
To sum up all the pros and cons, let’s have a look at the Vue vs React comparison table.
|React and Vue: Summary|
|Maturity||Developed by Facebook in 2013, 197,777 stars at Github||Developed by Evan You in 2014, 200,733 stars on Github|
|Community||423,200 questions on StackOverflow, 215,383 npm packages||98,778 questions on StackOverflow, 70,189 npm packages|
|Tooling||Official CLI Create React App||Vite and Vue-CLI|
|Flexibility||For ReactJS state management you can use Context API for small apps. For more complex apps, you can use third-party libraries, such as Redux, MobX, Recoil, and Zustand||For Vue state management, you can use Pinia. It is a new standard that replaced Vuex|
|Performance||High performance||High performance|
|State management||Context API for small apps, and libraries Redux, MobX, Recoil, and Zustand for larger apps||Pinia or Vuex|
|Storage Data Reception||More convenient syntax, but a large number of the details you skip down, and you cannot utilise the useSelector function very often||Despite awkward syntax and inconvenient transfer of props, storage is available in each component, and the number of requisites that you have to pass is rather insignificant|
|Development speed and cost||Improved development speed in the latest versions. The cost depends on the task||Improved development speed in the latest version. The cost depends on the task|
As we can see, both Vue and React have powerful tools and features that help us in web development. However, while choosing what to adopt you need to bear in mind those differences presented in the table to make the right choice.
When to choose React or Vue?
Both web development tools can be implemented for any needs and requirements. You can build web applications, single-page applications, and user interface components with their help.
Though you can include React and Vue components in one app, there are cases when one of these technologies is more preferable.
Here is the comparison table considering different factors to choose ReactJS or Vue.js:
|When to choose React or Vue|
|Build large ecosystems|
|Want to create clean code|
|Want the simplest learning curve|
|Want the most lightweight framework|
|Want a division of responsibility within one file|
|Develop an application that tends to grow|
|Want to access a larger community of developers|
|Work with designers and need pure HTML files|
To sum up, both Vue and React are powerful tools for creating complex web applications. They have gone a long way in development. New versions of both technologies have improvements that help developers in their work and make the user experience even better.
At Codica, we are great fans of React and Vue technologies and have built many custom solutions with their help, for example, a SaaS platform for the bakery business. Check our project portfolio to learn more about works we deliver with React and Vue.