Converting one of my older projects to use functional components and hooks instead of class components and prop drilling. It's nice.

Though now I have this useState:

const [ disembodiedHead, setDisembodiedHead ] = React.useState("");

Promise it's not as creepy as it sounds.

Why React is soo complicated? Seriously why do we always need to use some stupid shit like this

const [state, setState] = useState();

what the fuck is this? Who designed it that way, why it should always look like shit for no reason? Why its API feels like spaghetti? When i am comparing other front-end frameworks they feel like heaven in their structure.

AND WHAT IS WRONG WITH ME HAVING A QUOTE ON A PARAGRAPH ELEMENT, WHY DO I HAVE TO USE FUCKING HTMLENTITES FROM 2000?

FUCK'ERE

Who the fuck thought that in react useState should return an array and not an object. It makes me wanna make a wrapper that would instead return {current, set} = useSaneState('fuck you') because what the fuck does it have to do with arrays. And an object with shit.current would be consistent with useRef.

Also, vue is just superior in naming and coding standards.

Appreciation Rant for WebStorm's latest update to its React support -- Shift-F6 on useState hooks renames the state and its dispatch function name and I fricken love it

It's time for war!
I have two examples doing the same thing. They're bot generated by chatGPT.

React:
import React, { useState } from 'react';

function IncrementalButton() {
// Create state to hold the count value
const [count, setCount] = useState(0);

// Function to handle incrementing the count
const increment = () => {
setCount(count + 1);
};

return (
<div>
<h2>Count: {count}</h2>
<button onClick={increment}>Increment</button>
</div>
);
}

export default IncrementalButton;

VUE:

<template>
<div>
<h2>Count: {{ count }}</h2>
<button @click="increment">Increment</button>
</div>
</template>

<script>
export default {
data() {
return {
count: 0,
};
},
methods: {
increment() {
this.count++;
},
},
};
</script>

<style>
/* Add your CSS styles here if needed */
</style>

Whats better in your opinion?

is it bad to put your jsx in useState for react?

const = handleClick = (sort) => {
if(sort.props.id == 'default'){
setSort(<ArrowUpward id='up'/>)
}
else if(sort.props.id == 'up'){
setSort(<ArrowDownward id='down'/>)
}
else if(sort.props.id == 'down'){
setSort(<LineAxis id='default'/>)
}
}

the other alternative is using template logic which i think looks uglier, someone told me i did server side rendering in the browser

Finally im starting to get hang of how nextjs works. Still no idea how query params work, routing api calls, the proper structure, useEffect vs useState, SSR vs static props, etc but i wrote the messiest spaghetti code youve ever seen, and it works! I built a frankenstein. And its alive. Cleaning this shit up is the least difficult part