ReactJS vs Vue.JS — which one should I use?

With new libraries and frameworks being created all the time, it is not always easy to keep up with the novelties and know the specificities of each one.

Vue is currently one of the fastest growing libraries, and React is considered as the most popular one- we will try comparing them in this blog post. If you want more details about Vue, a great deep comparison with several different frameworks is available on Vue’s website.

“React and Vue share many similarities. They both:
- utilize a virtual DOM
- provide reactive and composable view components
- maintain focus in the core library, with concerns such as routing and global state management handled by companion libraries”

React

React was developed by Facebook. It was the first framework to popularize a Virtual DOM and introduced a new syntax, JSX that allows developers to write HTML directly in their JavaScript code.

One of the big positive aspect of working with React, is the possibility to see the rendering of your code instantly in the browser. It makes it easier for the developer to see the product with the ‘user eyes’. Another positive aspect of React is React Native which lets you build mobile apps using only JavaScript.

Vue.js

Vue also uses a Virtual DOM but instead of JSX it uses a template system, supposedly making it easier to integrate in apps. One important fact about Vue is that it has been created and is mostly maintained by a single developer, Evan You.

Weex for native-rendered apps is currently being developed in collaboration with Vue’s team.

Vue’s template vs. JSX:

  • Vue’s default option is to put your markup in an HTML file. It uses moustache braces (double curly braces) for data-binding expressions and special HTML attributes to add functionality. Using Vue default option, will make it easy to distinguish layout and functionality. However you can also use render functions in Vue.
  • When using React, you have to create your DOM in your js file. Using render functions makes it easier to debug and test.

Below is a comparison between Vue and React, both print a message and have a button that dynamically reverses the message:

code from here

State changes:

  • In Vue, you can just reassign the state. Component’s dependencies are automatically tracked during its render, so the system knows precisely which components actually need to re-render when state changes. So re-rendering is faster and more efficient.
  • In React, you need to use the setState function to update state. When a component’s state changes, it triggers the re-render of the entire component sub-tree, starting at that component as root.
code from here

React’s strengths:

  • Better at scale, studier and more testable
  • Web and native apps
  • Bigger ecosystem with more support and tools available

Vue’s strengths:

  • Flexible options for template or render functions
  • Simplicity in syntax and project setup
  • Faster rendering and smaller size
Since the beginning of the year, Vue is trending above React — for the first time!

It is not easy to settle between both as you can mostly achieve the same features but in different ways. After reading a lot of article on the subject, it seems that Vue is easier to start using but not ideal for large scale apps. Seeing the important growth of Vue, it is worth looking into it and understand how it works but the decision of which one to use really depends of your preferences (at least for now).

Like what you read? Give Lili Ouaknin Felsen a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.