DEV Community

Cover image for Why I let React go!

Why I let React go!

Adnan Babakan (he/him) on March 17, 2020

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...
Collapse
 
tomekbuszewski profile image
Tomasz Buszewski

About bind, you can use arrow functions in your components:

class App extends React.Component {
  constructor() {
    super();

    this.state = {
      counter: {
        state: 0
      }
    };
  }

  increment = () => {
    this.setState({
      ...this.state,
      counter: {
        ...this.state.counter,
        state: this.state.counter.state + 1
      }
    });
  };

  render() {
    return (
      <div>
        State:{" "}
        {this.state.counter.state === 0
          ? "nothing here"
          : this.state.counter.state}
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

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.

Collapse
 
adnanbabakan profile image
Adnan Babakan (he/him)

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!

Collapse
 
tomekbuszewski profile image
Tomasz Buszewski

Yeah, Vue is cool, for smaller projects – way better than React.

Thread Thread
 
adnanbabakan profile image
Adnan Babakan (he/him)

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).

Thread Thread
 
tomekbuszewski profile image
Tomasz Buszewski

It is capable. if it's suitable, that's another question.

Thread Thread
 
bravemaster619 profile image
bravemaster619

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.

Thread Thread
 
adnanbabakan profile image
Adnan Babakan (he/him)

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) called v-model and that's all what you need!

 
adnanbabakan profile image
Adnan Babakan (he/him)

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.

Collapse
 
sabbin profile image
Sabin Pandelovitch • Edited

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.

const [myInfo, setMyInfo] = useState({ 
    firstName: 'Adnan',
    lastName: 'Babakan'
});

const [otherStateObj, setOtherStateObj] = useState({});
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

return(
    loggedIn ? <Home/> : <Auth/>
)

either create a separate conditional and use it in the render

const content = {
   true: <Home/>,
   false: <Auth/>
}[loggedIn]

return content;
//or
return (
   <OtherComponent>
        {content}
   </OtherComponent>
)

You can also go further and wrap the content in a useMemo hook to not create it every time but only if isLogged 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.

Collapse
 
adnanbabakan profile image
Adnan Babakan (he/him)

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.

Collapse
 
adnanbabakan profile image
Adnan Babakan (he/him)
Collapse
 
dance2die profile image
Sung M. Kim

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 of class btw.

Collapse
 
adnanbabakan profile image
Adnan Babakan (he/him)

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

Collapse
 
dance2die profile image
Sung M. Kim

'tis getting quite annoying lately as I started using Tailwind, which needs lotcha className everywhere lol

Thread Thread
 
adnanbabakan profile image
Adnan Babakan (he/him)

Hahaha

Collapse
 
bravemaster619 profile image
bravemaster619

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?

Collapse
 
adnanbabakan profile image
Adnan Babakan (he/him)

LOL, yes I got rid of React. I don't use it anymore. xD

Collapse
 
grantholle profile image
Grant

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.

Collapse
 
grantholle profile image
Grant

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.

Collapse
 
adnanbabakan profile image
Adnan Babakan (he/him)

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

Collapse
 
joshuaamaju profile image
Joshua Amaju

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.

Collapse
 
adnanbabakan profile image
Adnan Babakan (he/him)

Yes, it is possible to use the arrow functions to avoid it. Thanks I will add to the post.

Collapse
 
wkrueger profile image
wkrueger

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

Collapse
 
adnanbabakan profile image
Adnan Babakan (he/him)

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.

Collapse
 
apperside profile image
Apperside

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

Collapse
 
pedrommarquesm profile image
Pedro Marques

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"

Collapse
 
adnanbabakan profile image
Adnan Babakan (he/him)

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.

Collapse
 
pedrommarquesm profile image
Pedro Marques

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

Thread Thread
 
adnanbabakan profile image
Adnan Babakan (he/him) • Edited

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!

Collapse
 
naingaungphyo profile image
Naing Aung Phyo

According to your reasons, you will be happy with Angular!

Collapse
 
adnanbabakan profile image
Adnan Babakan (he/him)

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!