DEV Community

Remon Fawzi
Remon Fawzi

Posted on

Main differences between ReactJS and VueJS, in my opinion

#react #vue #programming #javascript

I'll state three main high level differences I see between React and Vue.

Syntax

  • As a frontend engineer, my first love is vanilla JavaScript, so when looking for a framework or a library, I love it to be closer to vanilla JavaScript.

  • So, for me, React has more advantages than Vue at this point, as React is all about pure JavaScript with some additional utilities.

  • Let's take one example: If I want to loop through some elements in React, I would use the JavaScript map function, while in VueJS, I would use the v-for directive, which is different from vanilla JavaScript. So, the template in React is close to vanilla JavaScript.

// Using VueJS
<template>
   <div v-for="element in elements" :key="element.id">{{ element.name }}</div>
</template>


// Using React
{
  elements.map(element => <div key={element.id}>{ element.name }</div>)
}
Enter fullscreen mode Exit fullscreen mode

  • React currently has one official way of writing components (Functional components), while VueJS has two ways of writing components (CompositionAPI, OptionsAPI).

  • React has one way for defining state using the useState hook, while VueJS has two ways for defining state ref for all data types, and reactive specifically for reference data types.

  • This flexibility in VueJS is awesome, but it comes with a cost that if you look at different developers' codes, you'll see different coding styles, which sometimes make it harder for developers to adapt to each other's code.

So, for Syntax, I would go with React.

Performance

  • I'll focus on the Reactivity system of both of them, for sure, we can achieve good performance using each of them, but let's see which of them helps us achieve this more easily.

  • A React component has something called state. When any piece of this state changes, React re-renders the whole component by re-running all the JavaScript code in that component. Re-running the whole component's code is sometimes expensive. To prevent re-running everything, we use hooks like useMemo and useCallback.

  • So React developer needs to think about which piece of code is expensive to re-run, and try to decrease these re-runs or prevent them all. This is tricky.

  • On the other hand, in VueJS, Vue doesn't re-run the whole component's code with every state change, so you won't have expensive calculations that run unnecessarily, like React.

  • Vue computed function is easier than React's useMemo hook, as it detects what the value depends on without providing it.

// In React, I must tell React what my value depends on
const x = useMemo(() => y * z * w, [y, z, w])

// In VueJS, Vue's reactivity system will detect what my value depends on for me
const x = computed(() => y * z * w)
Enter fullscreen mode Exit fullscreen mode

NOTE: I still didn't dive into React 19, as I know it handles many of these cases, so my opinion is comparing React 18 to Vue.

As a conclusion, I see that both of them can achieve good performance, but VueJS handles Reactivity out of the box. While React makes it easier to mess with Performance.

*So, for performance, I'll go with VueJS.
*

Community

  • VueJS's community is increasing, but React has more support currently.

  • So, for the community, I go with React.

Conclusion

  1. Syntax, React is closer to vanilla JavaScript, so I prefer React when it comes to syntax.

  2. Vue has a smarter reactivity system than React, so I prefer Vue when it comes to performance.

  3. React has more community support than VueJS.

It's based on my own opinion and experience, so you may have different preferences, and it's okay. And I would like you to drop your opinion.

Thanks for reading!

Top comments (0)