Adnan Babakan (he/him)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
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:
Feel free to tell me if I'm wrong and I might change my mind. xD
