Vue vs. React — Which One To Choose in 2023?

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.

Flexibility in React

The flexibility of React is one of the main benefits of this framework. Below are a few ways in which React can provide flexibility:

• Component-based architecture. React’s component-based architecture allows developers to create reusable UI components that can be used across different parts of an application. This modality and reusability make this framework ideal for building complex web applications.
• Virtual DOM. React uses a virtual document object model to manage the UI state of an application. Such a virtual representation of the DOM is a lightweight version that can be updated more efficiently than the actual DOM, resulting in faster updates and enhanced performance.
• JSX Syntax. JSX syntax in React allows developers to write HTML-like syntax directly in their JavaScript code, making it easier to create dynamic UI components that can be updated in real-time based on their input or other events.
• Compatibility. React can be used with various other libraries and frameworks, making it a flexible choice for building applications that require integration with other tools and allowing developers to choose the best one for a particular project. Among the most popular third-party libraries are Redux, MobX, Recoil, and Zustand.
• Server-side Rendering. React provides server-side rendering capabilities, allowing developers to render the components of this framework on the server and send them to the client as HTML. It can improve the initial load time of an app and enhance its SEO by making it more easily discoverable by search engines.

The flexibility of React framework makes it a popular choice for building modern web applications that require scalable, dynamic, and performant user interfaces.

Flexibility in Vue

Vue is designed with flexibility and ease of use, providing developers with various features and tools for building complex and scalable web applications. Vue offers flexibility in the following ways:

• Flexible template syntax. Vue’s template syntax is easy to learn and use, which allows developers to write HTML-like templates that can be easily parsed and compiled into virtual DOM render functions. It makes creating dynamic and interactive user interfaces easy without writing much boilerplate code.
• Component-based architecture. Vue framework is built around a component-based architecture, which allows developers to break down their apps into small, reusable components. It simplifies the creation of complex user interfaces by composing small modular components.
• Reactive data binding. Vue's reactive data binding system allows developers to easily bind data to their user interfaces so that changes to the data are automatically reflected in the UI. It allows developers to easily create dynamic and interactive user interfaces without manually updating the UI in response to data changes.
• Built-in state management. Vue comes with a built-in state management system, which is called Vuex. The system allows developers to manage applications in a centralized, predictable way and simplifies the management of complex application data and state in a scalable and maintainable way.
• Plugin system. Vue’s plugin system allows developers to extend and customize the framework with their own functionality easily. With the system, they can quickly add new features and functionality to applications without modifying the core Vue code.

Both React and Vue are highly flexible and can be used to build complex, scalable web applications. The choice between the two frameworks ultimately comes down to the specific needs of your project and your personal preferences as a developer.

Development in React

Development in React involves using third-party plugins to add features such as routing and state management, which are crucial for managing navigation flow and handling application data. The component-based architecture of React makes it easy to create complex user interfaces by composing small, reusable components together. JSX, one of React's main features, allows developers to write HTML-like syntax in JavaScript, making it easier to create and combine components quickly.

Development in Vue

Providing native modules for routing and state management, Vue simplifies the process of managing application data and navigation flow. Vue also has a template syntax that makes it easy to create components that can be reused and maintained easily. However, due to the smaller size of the Vue community compared to React, it can be more challenging to discover reasonable third-party solutions.

We’ve collected the main pros and cons of React and Vue development in the table below.

Tools in React

React offers a variety of tools that can help developers build and maintain their applications efficiently. The most commonly used tools in React include:

• React Developer Tools. This browser extension provides tools for debugging and profiling React applications. It allows developers to inspect the component hierarchy, view the props and state of each component, and simulate different interactions with the application.
• Redux. It is a state management library for JS applications. Redux can be used with React or any other view library to manage the app's state predictably and efficiently. Redux provides a centralized store that holds the application state and a set of rules for updating that state in response to user actions.
• React Router. This popular routing library for React applications allows developers to define different app routes and specify what should be rendered when a particular route is accessed.
• Jest. Jest is a testing framework commonly used for testing React applications. It provides a simple, easy-to-use interface for writing tests and can be used to test both synchronous and asynchronous code.
• Webpack. This module bundler can bundle and optimize React applications for production. Webpack allows developers to define a set of entry points and dependencies for their app and then bundle all of the code into a single file that can be served to users.
• Babel. Babel is a JS compiler that can write modern JavaScript (ES6+) code compatible with older browsers. It can be configured to automatically transform React's JSX syntax into standard JavaScript code that any browser can understand.

These are only a few tools available in the React ecosystem. Depending on the specific needs of your project, you can also use additional libraries or tools to optimize performance, manage state, or handle other aspects of the application.

Tools in Vue

Vue is easy to set up and start developing. This framework provides developers with several tools to build applications more efficiently and effectively. Among some of the tools offered by Vue are:

• Vue CLI. This command-line interface tool helps developers quickly scaffold a new Vue project. CLI has many built-in features like webpack configuration, linting, unit testing, and more. It also allows developers to add plugins and customize the project configuration according to their needs.
• Vue Devtools. Vue Devtools is a browser extension that helps developers to debug Vue apps. It allows developers to inspect the component tree, view the props and state, and edit them in real-time. Vue Devtools also provides performance metrics like render time and memory usage.
• Vue Router. This routing library helps developers to build single-page apps with client-side routing. It allows developers to define routes, create nested routes, and handle dynamic parameters while providing navigation guards to control route access.
• Vuex. This state management library for Vue apps helps developers to manage the application state in a centralized store and provides a way to define actions, mutations, and getters to update and retrieve the state. Vues also offers plugins to integrate with other tools like dev tools and persistence.
• Vue Test Utils. Test Utils is a testing utility library for Vue apps that provides a way to write unit tests and integration tests for Vue components. It allows developers to mount components, simulate user interactions, and assert the component output.

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.

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).

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

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 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.

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:

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.

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.

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

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.

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.

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:

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.

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.

Contact us to know more about our expertise and work process

How to choose the right Framework

Get a consultation

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. Client-side rendering allows developers to render their websites with JS entirely. Instead of creating a separate HTML page for each route, the client-side website dynamically creates each route directly in the browser.
• Good control of the data flow. React uses unidirectional data flow, where data can only travel along one path when being transferred between different parts of the program. This allows you to maintain a clean data flow architecture and better control of the data flow.
• Light-weight architecture. React allows you to choose what routing library, state management library, etc., you want to use. It lacks these built-in features and, due to this, is considered lightweight.
• Extensibility and scalability. React's scalable modular architecture makes it easy to extract new components or combine multiple components into one, while many component patterns help with refactoring when the app’s structure is changing.
• Large community support. A community of millions of developers is one of the main reasons for introducing React into the project, as when a developer has a question, he can ask a specialist from anywhere in the world.

Cons of React:

• Steep learning curve. JSX syntax makes React more difficult to learn, which may not appeal to aspiring developers.
• Does not operate without other libraries and services, like Redux, routing, etc. React is a library and doesn’t have official libraries to handle common features in frontend applications like ex. routing, http requests, 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. Vue.js is highly customizable and scalable between the library and the framework. The platform can integrate various projects and help develop the Vue-based app without any hassle.
• Outstanding performance. Vue is an exceptionally fast tool. At 22.9 KB gzipped, a manageable size, and the ability to incrementally adopt parts of its technology, Vue probably has a long life ahead of it.
• Well-structured code. Every code component is stored in separate files, which makes the code much easier to read and maintain.
• Elegant language syntax.
• Fine user documentation. Compared to other JS frameworks, Vue has extremely detailed documentation. It provides information for a simple installation process, gives an overview of how the framework works, and includes a detailed comparison of Vue with other JS frameworks.

Cons of Vue.js:

• Lack of experienced developers. Vue hasn’t been around as long as its competitors, so it took a while for it to break into the market and see widespread acceptance by programmers.
• Small community. Vue.js is a newer framework and needs time to grow its community to the size of those who support React or Angular.
• A big part of the documentation is written solely in Chinese. Any forum conversations, plugin descriptions, or any other type of instructional manuals need to be translated for non-native speakers to proceed ahead in work.

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 or Vue.js:

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

• React vs Vue vs Angular, 03.29.2021 | Do Better Dev Show podcast
• React, Vue, && Angular, OH MY!, 10.14.2019 | Ladybug Podcast
• A Conversation about ReactJS, 05.26.2020 | Headless {Creator Podcast}
• React vs. Vue: With Guests Cassidy Williams & Erik Hanchett, 10.21.2019 | If/Else

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.