Adnan Babakan (he/him)

Posted on Mar 17, 2020 • Updated on Mar 20, 2020

Why I let React go!

#react #javascript

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 for that. Keep in mind that these are highly opinionated so feel free to tell me if I'm wrong. xD

Farewell — Literally me when finishing my last React project and knowing that I won't be back :((((

JSX

A huge entrance, no? As much as JSX empowers React it weakens it that much as well. JSX is a very powerful tool to define your UI in React but it is too much complicated sometimes!

As a web developer, HTML might be the first thing you knew when started learning web technologies and deep down in your heart you always have the intention to go back to normal HTML and JSX is what strays you further from this approach.

Although JSX tends to be similar to HTML yet it is not.

On the other hand the thing that made me angry about JSX is that it literally doesn't support conditional rendering.
You should have a variable or something to hold your JSX and then inject it in your main template as below:

render() {
    const isLoggedIn = this.state.isLoggedIn;
    let button;
    if (isLoggedIn) {
        button = <LogoutButton onClick={this.handleLogoutClick} />;
    } else {
        button = <LoginButton onClick={this.handleLoginClick} />;
    }
    return (
      <div>
            {button}
      </div>
    );
  }

As long as it is related to me this is not called conditional rendering this is just a condition!

On the other hand as React's official documentation says you can use any expression inside JSX by using curly braces like this:

return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 &&
            <h2>You have {unreadMessages.length} unread messages.</h2>
      }
    </div>
  );

Both of these are using JavaScript's basic features of conditioning yet they are not in good syntax.

This!

When you are calling a method inside your class-based component there is an obstacle if you want to reference other elements of your class which is called binding this!

Who they work with React know that to do so we need to bind this to those methods inside our constructor method so it works properly.

This is how it looks like:

class LoginControl extends React.Component {
  constructor(props) {
    super(props);
    this.handleLoginClick = this.handleLoginClick.bind(this);
    this.handleLogoutClick = this.handleLogoutClick.bind(this);
  }

  // ...
}

Though this is JavaScript's own behavior but React doesn't handle it pretty well and I don't like an extra piece of code in my component!

Note: You can avoid binding by using arrow functions! (Thanks to comments)

Nested states

As far as I know, React doesn't support updating nested states. This is really annoying when you are trying to write some neat code with categorized states.

To be more clear:

class LoginControl extends React.Component {
  constructor(props) {
    super(props);
    this.myTestFunction = this.myTestFunction.bind(this);
    this.state = {
        myInfo: {
            firstName: 'Adnan',
            lastName: 'Babakan'
        }
    }
  }
}

I cannot update myInfo.firstName directly and I need some workarounds in order to achieve this.

Check out this article if you are just starting with Node.js:

Starting with Node.js

Adnan Babakan (he/him) ・ Mar 19 '20

#javascript #node

Feel free to tell me if I'm wrong and I might change my mind. xD

Top comments (31)

Tomek Buszewski • Mar 17 '20

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.

Adnan Babakan (he/him) • Mar 17 '20

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!

Tomek Buszewski • Mar 17 '20

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

Adnan Babakan (he/him) • Mar 17 '20

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

Tomek Buszewski • Mar 17 '20

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

bravemaster619 • Mar 17 '20

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.

Adnan Babakan (he/him) • Mar 17 '20

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!

Adnan Babakan (he/him) • Mar 17 '20

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.

Sabin Pandelovitch • Mar 17 '20 • 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.

Adnan Babakan (he/him) • Mar 17 '20

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.

Adnan Babakan (he/him) • Mar 17 '20

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

#gatsby #react #nuxt #vue

Sung M. Kim • Mar 17 '20

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.

Adnan Babakan (he/him) • Mar 17 '20

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

Sung M. Kim • Mar 17 '20

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

Adnan Babakan (he/him) • Mar 17 '20

Hahaha

bravemaster619 • Mar 17 '20

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?

Adnan Babakan (he/him) • Mar 17 '20

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

Grant • Mar 17 '20

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.

Grant • Mar 17 '20

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.

Adnan Babakan (he/him) • Mar 18 '20

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

Joshua Amaju • Mar 17 '20

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.

Adnan Babakan (he/him) • Mar 17 '20

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

wkrueger • Mar 18 '20

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

Adnan Babakan (he/him) • Mar 18 '20

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.

Apperside • Mar 18 '20

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

Pedro Marques • Mar 18 '20

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"

Adnan Babakan (he/him) • Mar 18 '20

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.

Pedro Marques • Mar 18 '20

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

Adnan Babakan (he/him) • Mar 18 '20 • 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!