Why I let React go!
Tags: react, javascript
Published: 2020-03-17 01:24:14

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](https://media1.giphy.com/media/kaBU6pgv0OsPHz2yxy/giphy.gif?cid=790b7611ee1f14ea76af3d147a339639bd05f8c4915c8211&rid=giphy.gif)
<figcaption>Literally me when finishing my last React project and knowing that I won't be back :((((</figcaption>

# 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:
```javascript
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:
```javascript
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:
```javascript
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:
```javascript
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:
{% link https://dev.to/adnanbabakan/starting-with-node-js-2658 %}

---

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