DEV Community

Discussion on: Why I Converted from Vue to React

Collapse
 
michi profile image
Michael Z • Edited

Having used both extensively as well, here are my thoughts:

Vue requires a little bit of upfront learning (though most things like $emit can be learned progressively very easily). But the more you learn inside the framework, the less you have to learn outside of it.

React is a lot more low level in that regard. You even need to decide between several CSS solutions, forcing you to make impactful long-lasting decisions early on.

From the rails doctrine (rubyonrails.org/doctrine/):

How do you know what to order in a restaurant when you don’t know what’s good? Well, if you let the chef choose, you can probably assume a good meal, even before you know what “good” is. That is omakase. A way to eat well that requires you neither be an expert in the cuisine nor blessed with blind luck at picking in the dark.
...
You’ve surely heard, and probably nodded to, “use the best tool for the job”. It sounds so elementary as to be beyond debate, but being able to pick the “best tool” depends on a foundation that allows “best” to be determined with confidence. This is much harder than it seems.

This of course becomes less of a problem after a while...


Another example:

Sure, you can just pass in a callback for onFollowUser and don't get me wrong, I love the simplicity of this. But unless you wrap that callback in a useCallback, its child components will rerender unnecessarily leading to noticeably slow performance and lag in a fairly complex UI. Until you understand how React Hooks actually works, these are very surprising side effects, i.e. not "the pit of success". There are also a few quirks with useEffect:

Reference: blog.logrocket.com/frustrations-wi...

I seem to have spent an excessive amount of time twiddling various dependency arrays and wrapping functions in useCallback to avoid the stale state or infinite re-rendering. I understand why it is necessary, but it feels annoying, and there is no substitute for just going through a real-world problem to earn your stripes.

Vue takes care of these things for you. Not even once had I have to deal with rerendering/performance issues in Vue. The reactivity system just works and lets me focus on building the product. For me, it's okay to give up "JavaScript purity" for those reasons.

I do enjoy the simplicity of writing React components nowadays. But I don't think the Hooks paradigm is "just JavaScript" that everyone just grasps immediately, it requires a lot of exposure to get to know its various edge cases. I completely understand why React renders the way it renders. But I hope they find some solution making the process more obvious. Some of it is already solved by linters, but definitely not everything gets caught and some things likely won't be possible to get caught.

Like React Hooks simplified react components, Vue 3's <script setup> (github.com/vuejs/rfcs/blob/sfc-imp...) will also reduce the boilerplate to write components. Looking forward to that.

Collapse
 
brettfishy profile image
Brett Fisher • Edited

These are all great points. I agree wholeheartedly that Vue is very easy to learn. It was the first FE framework I learned, and as I mentioned, it took me a while to finally decide to move to React because I do appreciate its simplicity.

To someone just starting out with JS/web dev, I'd most likely recommend Vue because it fairly easy to learn. I probably ought to make it clearer in this post that I chose React not for ease of learning the framework. Rather, as I've come to understand JavaScript better over the years, I've actually come to really appreciate and even rely on the "lower level" features of React to write the kind of software I want. Plus, at this point I just feel like I can't live without TypeScript, and overall I've found it a lot easier to setup with React.

Yes, hooks definitely take some getting used to! When I first learned about useEffect, I remember thinking "seriously, I have to declare its dependencies? Vue's computed and watch do that for me!". However, I came to appreciate the simplicity that useEffect offered - I didn't have to worry about the difference between things like mounted, created, beforeCreate, etc. Granted, Vue 3's composition API will remove a lot of these nuances.

There's no perfect framework, and I'm not here to say that one is right and another is wrong. At the end of the day, I personally feel a lot safer making bigger applications with React.