Vue or React?

A couple of months ago, I chose Vue to be my point of entry to the frameworks realm in web development. I also decided to go in depth-first. So, I practiced barebones Vue, then used Vuetify, then - after getting sick of all the props and emits - I learned Vuex, and now I am playing around with Nuxt. In all this, I have not even glanced at the documentation of React.

What I know about React, I know from occasional blog posts. A common claim I came upon was that Vue is simpler to learn than React. And that does not seem to come with a penalty in terms of performance or robustness. As I understand, from reading and not from experience, both frameworks are equally useful for projects of different scales.

At least from my experience, as I work on my first meaningful web project, I find myself constantly impressed by how simple the development process is. Especially, when component libraries like Vuetify are utilized.

Assuming my understanding is correct (and feel free to enlighten me if it isn't) I have two questions:

1. With Vue.js readily available, is there any reason to learn React—other than the fact that React came first and therefore has the bigger market share?
2. If no such reason exists, do you expect Vue to take over in the future? In other words, any reason for a startup project today not to be developed in Vue instead of React?

Comments

[Ivan Jeremic]

It is ok that you have your own opinion but there are clearly more people who disagree with you in the world then with me.

[Ryan Carniato]

I do actually prefer the React solution here (mostly) even if my personal perspective might put me closer to Svelte camp. I've used dozens of JS UI frameworks. I'd like to even consider I have some expertise on the subject.

I know the first thing is React but for the sake of this argument it doesn't have to be. We are talking about an explicit JavaScript semantic expression that could do the same thing as the Svelte one except it is more explicit what is going on. I know that in React that is not what is happening and that useMemo is a whole other craziness given Hook Rules and potential stale closures etc..

But syntactually the first is clearer of what is going on. What values are being derived from, what is happening simply from being named. There are other benefits. Composability, modularity.. What is $: and why does it have this behavior? Can I just pull my $: statement into a different file and expect it to behave the same.

To be clear I do think this is an opinion thing but one could easily make the same naive argument that React is factually better from that example. This comes down to easy vs simple. Implicit vs Explicit etc.. Everyone has it's own comfort level. We can discuss the tradeoffs of the abstraction vs the internals to death, but ultimately these libraries are doing similar things and more important similar complexities are there.

So conversation is good. This argument not so much.

[Chakrit Likitkhajorn]

I think useMemo(() => ) is more maintainable than $, and I am not smoking anything.

What are you smoking?

[Shadowcraze90]

I recently learned svelte a few weeks ago and absolutely love how simple it is. You can literally just look at the documentation with a quick glance and be like, "oh, that is how its done." Sooooo simple. At work we use Vue.js. React's bound properties are just messy.

[Guttenbergovitz]

Actually I am also impressed by Svelte, which seems to be sort of novelty on this given battlefield, but it is contender with mentioning IMO (especially considering SvelteKit).

[Sdu]

From your first sentence, I could tell that you're a great fan of React, and I read the whole thing to try and counter where I disagreed. But upon finishing the whole comment, I don't think it's worth the hassle.

Most of your claims about Vuejs are either subjective or either misrepresented. I've been using Vuejs for years and I've started learning react last year and I'm really enjoying it 🙂 There's nothing wrong with liking both, and choosing one over the other depends on so many factors apart from the ones discussed here

[K]

I have to admit, I didn't find anything interesting in Vue.

It's only USP seems to be "not made by Facebook".

If I wanted something better (and not just different) from React, I would use Svelte, which seems to be the only UI framework out there that brought something new on the table after React came out 🤔

[Ivan Jeremic]

Yep agree, most people hate React are just hating the company behind it, I find it very sad that developers get mixed into politics. Svelte looks great it is definitely my nr. 2 after React

[Ghaleb]

Ok, as I said before, I have not used React yet. But I think many of the arguments laid out here are invalid.

if you use React you get the cool things first.

This would only be a plus if both codebases in general are equally maintainable in structure and syntax. If the popular claim is that Vue is easier to learn, more structured, and easier to maintain, then getting the cool features first doesn't matter; especially if the current features do a good job already.

Most important is React components are far more flexible you write just JavaScript so no v-if stuff that forces you just to unlearn JS

v-if and v-for did not force me to unlearn JS. Their use is very intuitive. In fact, I appreciate the fact that the HTML and JS parts are well separated in Vue. I think this is a highly subjective point, and not a deal breaker when choosing a framework.

In Vue you need to duplicate yourself so often because you need to register components before using it which is crazy

That is a false statement. You either register a component globally to avoid importing it in multiple other components, or you don't register a component and you import it only where needed.

Finally, when you speak of NextJS you should compare it with NuxtJS, not plain VueJS.

I am not saying Vue is better, I am simply pointing out the flaws in the arguments presented.

[Ryan Carniato]

If the popular claim is that Vue is easier to learn, more structured, and easier to maintain, then getting the cool features first doesn't matter; especially if the current features do a good job already.

Is this the popular claim? Easy to learn, completely. Vue likes being the progressive framework. Vue's like "All you need to do Web Dev are these couple things don't worry about the rest, and as you need to know more we will direct to your next level". That might mean changing your mental model slightly and introducing new APIs and capabilities. It's very welcoming. It's also leveled which works well with how we learn.

React's like "Here are some primitives, here is a philosophy, now go out into the world". You get the basics and never need to come back until they introduce a new feature. I think there is a lot of preference in what is a better pattern for each person/team.

But saying Vue is easier to learn seems reasonable, even if I think if your goal is to become an expert React might be easier from the onset because they don't waste your time. React is also simpler architecturally. I mean there is fiber, but if you were to write a clone from scratch React's model has less moving parts generally.

More structured? Easier to maintain? ... I mean there is a reason Vue 3 exposed their reactivity in the composition API. I imagine this was to address limitations in that structure. As way to improve expressiveness and composability. Those probably make Vue less structured than before and possibly not as easy to maintain. It's a good tradeoff. But I don't think these are particularly compelling arguments for either library.

There is an argument on less reliance on 3rd party libraries means more stable code base, but there is an equally apt argument that easier ability to swap out pieces leads to better long term maintainability. Not that you'd could do this in Vue as well, just you end up in the same place if official vue-____ doesn't solve your needs.

React does get the cool things first, but that is double edged. They are doing the R&D work and the early adopters are paying the price. Vue waits until things are settled usually before dipping in. Directionally being innovative might be something you appreciate in your tools, but most people are looking for stability. But it does make for the argument that if only one of these libraries was to survive I'd take the innovative one. Not that there aren't small innovations in Vue. They just mostly play it safe and their community thanks them for it. But I think it's still a checkmark on the React side.

The rest of the original arguments I agree are a bit out there. So much easier if people on both sides just understand that JSX vs v-for or what not are conceptually close enough that this comes down to syntax mostly. JSX side can claim theirs is more flexible (and it is) but you can always achieve the same things in Vue-like templates albeit with a bit more work. The Vue side will claim their static templates are better for compiled analysis/performance. But not in any meaningful way as the fastest UI frameworks use JSX or HyperScript.

[Nathaniel]

You can do the same style templating in Vue as in React if you wish. You don't have to use v-if. It's just usually easier to write the html seperately.

I don't have much experience with React but it feels less like I'm making a website than with Vue. With Vue I write the html like I would if I was using vanilla javascript, then I use Vue to add functionailty on top. That just makes more sense to me.

[Ivan Jeremic]

Less making a website? I think this is not a con, who knows what the future brings maybe someday you run compile in a React project and it spits out a Web, mobile & desktop version.

[Nathaniel]

You're right, not necessarily a con. Just a con for me.

[Ivan Jeremic]

I don't even know what you mean by it does not feel like you are making a website, what defines that writing just html css & js in seperate files? Why should everything be like that? I don't get it.

[Nathaniel]

Progressive Enhancement is the reason.

At it's heart a website is an html document, and for functionality that can't be done with html, you use javascript. Then you make it usable and pretty with css.

That's still the best methodology for building a broadly accessible website, with the best performance.

When i build websites I want them to work even if javascript doesn't.

If i was building a video game in the browser then I wouldn't think about it like that. But most of the time websites are still just text and images. You can still achieve these things with react, i just don't think it's designed with that in mind.

[Ivan Jeremic]

JavaScript is a must have for modern sites if all you think about is how to make website work even if the user has js turned of what very likely no one has these days all you loose is flexibility. Also focusing to much on the browser is wrong I see the power of web tech everywhere also outside of browsers as GUIs for desktop and mobile apps, and if we keep developing like 20 years ago there will be no new innovations. I also see WebAssembly helping the web tech become a standard GUI for every language and platform.

[Nathaniel]

Sure, but right now, if I want to make a website that's as accessible as possible, I don't want to start with Javascript, I want to start with html. So if I need complex functionality i reach for vue. if I need a small amount of functionality i use vanilla javascript.

~0.2% of people have javascript disabled. Javascript doesn't work at all until the page is loaded. So for at least a second every page has javascript disabled. Web crawlers often don't parse javascript.

I may well end up building some complex app with react one day. But I've not come accross a need for it.

[Michael Z]

most importantly it gets better first. So they come up with new things like Suspense, Server-Components recently or back in the day hooks, so no matter what they do everyone will just copy them but if you use React you get the cool things first.

Not sure how getting things first is a benefit in any way other than "being first". The first iteration of something is usually still somewhat underdeveloped. The react team itself said that useEffect is more of a low-level API, yet it's used like crazy. By not being first, you can learn from these constraints, just take a look at the list of benefits Vue's composition API has over React hooks: composition-api.vuejs.org/#compari...

Most important is React components are far more flexible

Would love to see an actual example of this as I see many pointing this out without providing anything concrete.

you write just JavaScript so no v-if stuff that forces you just to unlearn JS, In React you write If else for conditional rendering and it makes just more sense

So the first time you did react is was completely obvious that to render a list, you have to use {array.map()} in JSX? Then how come this stackoverflow question has over 144k views?

You don't unlearn JS by learning a little template language :D It's just HTML with a little reactivity sprinkled on top. In fact, Vue stays true to the traditional form of web development (HTML, javascript, CSS) at the component level rather than mixing those things left and right. (I am not saying React's approach is bad, just responding to the "unlearn JS" claim.)

also you can pass everything as props in React which is very powerful even other React components

I have no real preference here. It's nice that react allows this, keeps it simple, but I also like the structure that Vue components have thanks to this (slots > render props). But I can see how this can turn people off coming from React.

However, you have to be very careful in react to properly use useMemo and useCallback otherwise the performance of your app will be really bad on complex pages. This I find extremely unfortunate as it goes against best practices of basic API design (blog.codinghorror.com/falling-into...)

In Vue you need to duplicate yourself so often because you need to register components before using it which is crazy

That's definitely annoying, but there is an RFC to address it already.
But not nearly as bad as all the boilerplate people brought into the world by applying every possible redux abstraction they could find on npm ;)

[AdithyaR-afk]

Svelte is just better in every aspect. React suspense? This is already implemented in Svelte as Await block including a catch block. Server components ? Lol it this was present in svelte sapper from day 1 . And also your comment about unlearning JS? But React forces you to learn JSX which is the single worst thing about the framework. Don't get me started on Redux and Mobx. And the whole Should component update hooks shows how crappy React is and how much developer effort is needed to make a performant app

[Ghaleb]

So many comments about Svelte! Now I'm thinking my next step from Vue should be to learn Svelte not React. lol

[Ryan Carniato]

I worry the content here is misleading. Await block !== Suspense. Here are some people looking at actually implementing Suspense in Svelte. The Server Components in React is subtly different in that they do serialize partial updates after the client has already been rendered, and they support out of order streaming. Svelte/Sapper doesn't support either of these. JSX is like a template language, so obviously, people have different perspectives. It is funny that libraries with Single File components that put markup with their scripting don't catch the same flack but to each their own.

However, I agree with your last point. The effort to be explicit about blacklisting change starts you at a place of less performance. It has the benefit of things at minimum update instead of potentially not updating which can happen with any sort of auto-tracking system. So the mentality of leaving the optimization for when you want to optimize is logical. But the library presumably has enough information to make some of those decisions for you. I think this is more of a philosophical one though.

[AdithyaR-afk]

Suspense almost serves the same functionality of await. Ofcourse there can be more control in react suspense(ex: handling promise timeouts) but the same can be done in svelte via wrapping your original promise in another promise wrapper ( which ironically you need to do for react suspense to work anyways).
As for JSX I agree it is subjective.

[Jon Randy 🎖️]

Vue or Svelte or RiotJS. JSX is an abomination

[Pacharapol Withayasakpunt]

Next.js or Nuxt.js for rapid development.

JSX is good; and React is not the only JSX framework. Vue 3 can also use JSX well.

I expect any JS framework to be ephemeral. All will die early.

[Ghaleb]

You think so? You don't believe that the monumental popularity that these frameworks have today will cause them to linger for a while? I mean the only reason jQuery is even relevant today is because there remains a great number of projects that used it some years ago. What would "kill" a framework like React or Vue so soon and allow a library like jQuery to live for so long?

[Pacharapol Withayasakpunt]

I think jQuery lived because of web browser wars; and ES6 and Webpack replaced it.

Right now, you can actually code fine with vanilla JS. Going for something new would be ES dev server or Vite, but I can really bet on it yet.

[Ghaleb]

I agree. You can code fine with vanilla JS. That's exactly my point.

jQuery is essentially redundant at this stage, but it remains relevant because of its past popularity.

I think it is likely that the comparable popularity of these JS frameworks will prevent them from dying out quickly—even if they become replaceable.

[Natalie Martin]

Any framework is going to be opinionated and have its own philosophies on how to design systems. The "best" frameworks will be the ones that mesh well with the project's domain and the development team that's actually developing and maintaining the project.

When it comes to the pros and cons between React and Vue, it mainly comes down to differences in basic developer experience. There are probably some slight performance differences, but it really comes down to choices in how you want to design the code making up your system. Do you want to use specific technologies that mesh better with a specific framework? Where do you like putting your component-specific CSS? Which framework seems to have a better ecosystem to you? Do you like JSX or Templates?

I think you should learn both if possible. I think there are good pros and cons to both frameworks that keep them pretty balanced in my mind, but even if you clearly prefer one over the other I think it's good to ask why you like it more.

[Ghaleb]

Thanks for your input.
I am sure I will learn React at some point; it might even be in the near future. If not for anything else, it would be for a better resume. Even though I have fallen in love with Vue, React simply has more jobs—at least where I live.

[artydev]

Try Meiosis pattern with whatever framework you want.....

[Ghaleb]

The best part of a discussion post is that you almost always learn about new things in the comments. Thank you for the tip. I had not heard of the Meiosis pattern before, I will definitely look it up!

[ppezaris]

The problem with any of these frameworks, and it's not going to be solved any time soon, is that they're all moving targets. That means if you're operating a team of any decent size, you have to be careful about the cost required to keep the team trained on all the latest ideas/paradigms, and the cost of constantly refactoring old code to do it the new, accepted way. If you don't, you'll pay the price in the long term with having 6 different ways to do the same thing in one codebase.

[Daniel Kaiser]

I started with Vue and worked at start-up where I implemented. I now work a big brand where the architecture is react. Some comments just poo poo on Vue and claim React is better are Devs that haven't built production apps with Vue.

Vue:

• Single Files Components are great
• In SFC's knowing where methods, state, render life cycles go is just easy to read
• Personally I found global state management in Vuex easier than Redux or Context API
• No jsx weirdness
• scoped sass is easy
• better, easier to read conditions v-if, v-else

React:

• Better built for super modularity
• Better for child components to update parent state
• React hooks, once you use and understand them are nice
• Jobs, jobs, jobs > marketshare

[Ghaleb]

Can you elaborate on the "super modularity" point?

I like the point made in the Vue.js docs:

One important thing to note is that separation of concerns is not equal to separation of file types

Beyond personal preference, and I will agree that this seems highly subjective, is there a reason why React apps would be "more modular"?

The jobs point is spot on. So far I find it to be the only compelling reason for a newbie like me to consider React.

[Daniel Kaiser]

By Super Modularity I mean everything is a component. So much so, in large systems, you need a design pattern like Atom Design Methodology: atomicdesign.bradfrost.com/chapter-2/

I think React, community and docs, point you in that direction. Vue can be the same way, in my opnion, but I think react more so

[Madza]

I did Ctrl+F for 'Svelte', was not disappointed 😀😀

[Dennis Frijlink]

Let me know what you think about Svelte: bit.ly/3s2NwKh

[Bret]

I like react more. Vue has allot of sugar and dosnt visually match up to what you want to do. There’s allot of syntax that’s easy to name possibly the same that needs to be changed at times, yet it’s just a : and your tired things together. I like react more because it’s truly laid out right.

[Justin]

But Angular <3

[Adam WaƘiƑ]

Vue is like Kakashi Sensei.. Clone everything from React.

[mrwaccaff]

Àwa vanilla js developer nko make we go die.
Some of these people that walked straight to a framework never knew our stack 😃😃😃at all
document. getElementById
document.getElementByClassName
document.querySelector
document.createElement
document.anything
document.poweremowere.
😃😃😃😃😃
The father will always be older even if its the grandfather Na he n sha born the rest. They may be smarter but na hen be source baba Na baba
We have to start our war also oooooo
Vanilla or js or react
🧑🏾‍🦯🧑🏾‍🦯🧑🏾‍🦯🧑🏾‍🦯🧑🏾‍🦯🧑🏾‍🦯🧑🏾‍🦯🧑🏾‍🦯🧑🏾‍🦯
Any vanilla js developer to join me in this fight😃😃😃

[Sylvester Nkeze]

😂😂😂🤣. Baba, I just tire oh

[Tofi Agbaje]

All I'll say is, I'm happy I know both, and if you put a gun to my head and told me to forget either one, I still wouldn't choose. One thing you can immediately tell when you get comfortable using both is that your needs dictate the more convenient choice. Even still, whatever you achieve with one can be achieved with the other.

[Desmond Chin]

To be fair, it depends.

Vue is a progressive framework, and for me that is their best advantage. Got an old project you wish you can quickly revamp? Use Vue. Literally plug & play. There's no need for setting up bunch of webpack and configurations like React.

React is considered to be an ecosystem for me. You are either fully invested, or you should not use it.

If I am building Enterprise applications and more towards MVC-based web applications, I'll use Vue. It is cleaner, neater, and more elegant. If I feel like being fancy and want to have a wider community based plugins or kits, I would go for React. JSX is great, and I am glad Vue adopted it.

I think Vue and React will not replace each other. They are each their own. Learn both, and know when is good for either one of them. Remember back then, the best thing JS had was jQuery. Be grateful!

[Ghaleb]

That seems like a fair comment. I was actually anticipating the "it depends" answer. The case you give with the "wider community-based plugins" seems convincing, but so far seems the only convincing case to pick React over Vue for a given project.

And don't get me wrong, I am grateful. I definitely plan to learn both. The main point of my second question was to assess which deserves bigger attention for a better long-term strategy, that's all :)

[Desmond Chin]

Understood your concerns. I find it hard to decide for a project all the time. But, to see it in long term, I would personally choose Vue over React.

Technology changes fast. Being progressive, it is easy to revamp or scale your application part by parts using Vue.

If I am to have a project that focus on being nice, fancy, and hippie, while knowing it will be totally obsolete and needs a total rewrite regardless in 2-3 years, I would go for React.

Some sort like a sprinter vs marathon. This is not to say React is fast, thus being the sprinter, but React has a mature community and a deep ecosystem. It will be a very impactful framework, but hard to bend it once it's planted in place.

[KAIDI]

Many people in the comments talk about svelte, have you used it in some big projects or applications? can you share your feedback please ? thanks.