Hey there DEV.to community!
As I was working on some projects recently I was asking myself why did I let go of React?
Well, here are my reasons f...
For further actions, you may consider blocking this person and/or reporting abuse
About
bind
, you can use arrow functions in your components:See it here: codesandbox.io/s/friendly-wood-fgwew
About the nesting states, while it's possible (like I've shown), it's better to use
useReducer
hook for such constructs.Conditionals in JSX are good in my opinion, and most of the time are solved by a oneliner. If you don't want to use them explicitly, you can always move the part responsible for rendering this somewhere else, into a method or a separate component.
React is great for doing large things. Paired with TypeScript and Redux, you can build a huge application with relative ease. But for smaller things – it's overblown.
React is awesome in someways and it is unique, but still, I don't feel comfortable with React after I met Vue which handles many things in a more simple way than React and surprisingly it is even faster than React!
Yeah, Vue is cool, for smaller projects – way better than React.
I don't think Vue is not capable of handling big enterprise-level projects. I have tons of projects done with Vue (actually Nuxt.js) and I will share them here on DEV.to once they are published.
I think you should try Vue as well.
BTW Vue also supports TypeScript (though I'm not a fan of xD) and also has Vuex (like Redux).
It is capable. if it's suitable, that's another question.
Coding in vue is more organized than in React. I think React is just-get-shit-done attitude. As you can see in this post, React lets us use raw javascript in rendering and binding events. Sometimes it feels more comfortable except when you have to bind inputs to states.
Hahaha, good explanation.
True! In React in case you want to handle a data change and use a two-way binding system you should have a function that is called through
onChange
event on the input and then update its state while Vue has an attribute (directive) calledv-model
and that's all what you need!I think the choice of a framework is only a personal matter. Both Vue and React are great tools for designing web apps. They are both powerful.
You can try to move to functional components instead. You will not get rid of JSX but it will certainly resolve some issues that you listed:
this
Will not be a problem anymore
Nested states
I had another problem here. Not as the fact that it doesn't work, you can have nested states as you specified. The problem wast that render was not triggered on the nested changes... the component does not render again due to the fact that it checks only the first level of the
state
object, it's not a deep comparison.With hooks you can split the nested object to multiple objects and have only one level.
JSX
Conditional rendering... you can have conditional rendering in multiple ways done, it's just a matter of choice
either just put the conditional in the render function
either create a separate conditional and use it in the render
You can also go further and wrap the content in a
useMemo
hook to not create it every time but only ifisLogged
has changed...There a lot of ways of going on with this... I think that going to functional with hooks solves some issues, of course everybody have their own opinion, this is just mine on this case.
Hi
All these things you mentioned are amazing and thanks for sharing these with me.
But still I believe these are ways to workaround and still very complicated than other frameworks like Vue.
I suggest you read this:
How is it like to work with GatsbyJS as a Nuxt.js developer?
Adnan Babakan (he/him) ・ Nov 8 '19 ・ 6 min read
Everyone's free to stick with whatever solves the problem and feels natural.
You can get around with
this
with Function Components (FC) w/ hooks. For nested states, I agree with you it's annoying (but there is a workaround with immerjs. Yes, another library...)Another hindrance for JSX is having to use
className
instead ofclass
btw.Hi
You are completely right.
And yes I was going to mention
className
but I thought it might not be that much a problem anyways. LOL'tis getting quite annoying lately as I started using Tailwind, which needs lotcha
className
everywhere lolHahaha
const myInfo = {...this.state.myInfo};
myInfo.firstName = "Sana";
this.setState({myInfo});
You are absolutely right. I always feel inconvenient about these three problems.
But did you get rid of React? Seriously?
LOL, yes I got rid of React. I don't use it anymore. xD
I started with Vue and learned some React later. I came to the same conclusions. I really don't understand why it has such a cult following. I can see some of its merits, but in general think it's overrated and "messy" as you mentioned in the article.
And it's a FB project, which isn't a technical issue but more of a moral/social issue. This is a big factor for me personally.
You are true about Facebook. xD
I don't like Facebook that much either.
Some people in the defense of React tell me that it is a project backed an supported by Facebook so it is better, well, Angular is a project by Google yet it lost lots of fame due to its high complexity. xD
I totally agree on the last point. I always feel messy each time I have to update nested state objects.
On your second point, you can avoid binding by making the handler a class field - using arrow function.
Yes, it is possible to use the arrow functions to avoid it. Thanks I will add to the post.
My main pain point with react is contexts and nesting hell.
Every time I need to make state globally available, creating contexts is painful. Reasoning about efficient contexts (not rerendering everything) is even more painful, which ends up requiring 3rd party state management libs.
Meanwhile, attaching scoped state in Angular is absolutely easy with viewProviders
I highly suggest you try Vue.
Vue supports nested data (same as state in React) changes and many more better features and a very well organized syntax.
I whish this article was written one year ago: except for the conditional rendering (that remains the same as you wrote, still more powerful than you say), all the problems you pointed are not a problem anymore with the introduction of hooks and deprecation of class components: for the state "problem" you can use useState hook (hooks should be them selfs a valid reason to NOT let react go) and by using arrow functions you avoid all "this" related problems
You sure don't dive into React more advance concepts.
Even though most of what you said is true, there's still so much more of React than "just this"
Well, you might be true.
But I worked with React for long enough that I at least touched everything within it for once, yet I believe Vue is literally better than React in many aspects.
do you feel that, for its simplicity and learning curve?
I work with React for more than a year and yeah... There's much more to learn, anyone can get lost if no caution is used developing
Vue is not simple, it is just more simple than React let's say.
It is just not because of the simplicity of Vue! Vue renders much more faster even though it has more syntax and features in it than React and that is due to its optimization! Vue is a framework but React is a library and yet I don't understand why React can't be much more optimized so it runs blazing fast and faster than Vue!
According to your reasons, you will be happy with Angular!
Oh really? I mean I've never had a chance to try Angular because I find it really hard, but if you say so I will try to learn it then!
Thanks!