Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

React is holding me hostage

emnudge.dev

Post reply on HN
Print view View original

471–480 of 553 posts

Re: React is holding me hostage

#471

Post by _v7gu »

petilon wrote: post #420
_v7gu wrote: post #99

Earlier quoted context omitted.

How can you ever be sure that your state is valid when you’re putting it on the DOM? Worse yet, only parts of the state is stored there. I can’t really call this code simple since it had to resort to timing hacks to get its functionality in order. A random 250ms delay and bam, bugs you cannot reliably reproduce

Can you clarify what you mean here? What state is in DOM? Do you mean the state inherent in input elements? What timing hacks are you talking about?

The first file I looked into was the combo box. This is what I consider to be a timing hack:

    private onDropDownMouseOver(ev: MouseEvent): void {
        if ((new Date()).getTime()
Some event stores the time it has been fired, and this method checks that it has not been long since the firing. With react, which item has the highlight would have to explicitly be in the state and completely remove the need to do this optimization.

And this is an example of what I consider state being stored in the DOM:

    private isDropDownVisible() {
        return isVisible(this.dropDown);
    }
The view has logic that depends on whether the dropdown is visible, which is checked by dropdown.style.display !== none. Now any element in your page has the power to modify this component’s logic by modifying the DOM

Re: React is holding me hostage

#472

Post by dsego »

ojkelly wrote: post #470
dsego wrote: post #230

Earlier quoted context omitted.

It's still using the useEffect hook, but just wrapped in a useFetch or something. So technically you're not building a UI without useEffect, just hiding it, no?

How far down the rabbit hole do we need to go? Because at some point your function call is manipulating registers on the CPU. If we go even further, the CPU needs to load its next instructions and then the data required. Point being, we abstract and encapsulate complexity and provide a simpler API around it. It’s the only feasible way to manage the inherent complexity. React builds up a virtual description of UI. rea…

It's just that "You can build a UI without useEffect."

and

"You can ... contain where useEffect is being used."

are not the same statement. Maybe I'm being pedantic, but when I read "build without X", I think there is some method that can be used to avoid X, not that I can hide away X.

Re: React is holding me hostage

#473

Post by ojkelly »

petilon wrote: post #70
ojkelly wrote: post #66

Earlier quoted context omitted.

But you can do that with algebraic effects. That’s kind of the point. You keep the clarity of declaring what you want to happen, and abstract the how to the effect handler.

None of that is true in React hooks. The negative sentiment towards hooks that you see here is because it is weird and complicated. Want to see how much simpler code can get when you code without React or any such fat frameworks? Take a look: https://github.com/wisercoder/eureka/tree/master/webapp/Clie... You just need to know JavaScript, HTML and CSS, not much else. The code is simple, and yet maintainable. No need…

We’re coming at this from different mental models.

The code you linked is what React helped me get away from. There’s multiple files in different folders for one screen. It’s hard to see how it composes, which is a useful boundary as it lets me know in the scope of that part of the UI.

UI is _hard_. There’s complexity that needs to go somewhere, and I’m one of those who prefer to push as much if it that isn’t business logic into a framework.

This becomes exponentially more important for every engineer you add. Go success is along these lines, with typically only one way to do things it’s much easier to share code.

From the code you linked, I could find my way around, but piecing it all together took a lot more work than any of the frameworks.

You mention only needing to know JS, HTML and CSS. But you missed that you still need to know how all that code is put together, what calls what. How it updates. React needs this too, the only difference with it being a framework is that knowledge transfers to a different project.

And to be clear, I’m not saying you need to use react or a framework—going your own way is often how amazing new things are found.

What I am saying is your attitude isn’t helping you here. React is still arguably the most used framework[0]. There’s a reason so many of us like using it and it’s what you described as “other crap”.

Frameworks help with collaboration, in the same way programming languages do. To do anything interesting with a general purpose language, you’re either going to use a framework, create a new one with good documentation and build a community of engineers around it, or build a halfbaked one that few people understand.

I’m open to other ways of doing things. It’s a good way to grow. I learnt SwiftUI a little while ago, and while I don’t use it regularly it improved my understanding of UI building. I learnt imperative UI API ages ago, and know for sure I want to avoid/contain that into a more manageable declarative approach.

[0] https://trends.builtwith.com/javascript/javascript-library/t...

Re: React is holding me hostage

#474

Post by ojkelly »

creamyhorror wrote: post #454
javcasas wrote: post #428

Earlier quoted context omitted.

https://github.com/wisercoder/eureka/blob/master/webapp/Clie... I love how you do React. I mean, what's more react-y than blanking the page then appending HTML? I'm gonna call that Rejqueryact, because it's jQuery inside React.

I'm not seeing React being used, though, just TSX/JSX? All the view and state updating is being done manually, but it looks fairly well-organised. There are small optimisations like debouncing onInput with a timeout (avoiding rapid re-rendering/ react ing to every character typed): https://github.com/wisercoder/eureka/blob/master/webapp/Clie... Is this really much more complicated to implement than the equivalent imp…

I think they’re referring to how Reacts mental model is to wipe the page and rerender. The earliest versions basically did that, and then they started diffing and applying the diff.

Re: React is holding me hostage

#475

Post by mattigames »

sli wrote: post #462
mattigames wrote: post #387

Earlier quoted context omitted.

Yes I do, the only language I use for my personal projects is Typescript; I think JSX, .vue, .svelte they are all a mistake, JS is more than enough if you really need to use it to compose html. div('#wrapper', div('.container', span('.big', `It's not that hard`), button('.red', {route: home}, 'Home!') ) )

You should give Clojurescript a serious look. You can use that approach, but the resulting code is... well, readable.

There is nothing readable about JSX, "" will always be greater-than.

Re: React is holding me hostage

#476

Post by hirvi74 »

philliphaydon wrote: post #386
mattwad wrote: post #376

Earlier quoted context omitted.

Trying to be fair here, but what about vue makes it less likely that you won't put the same conditional logic into your vue template? If it's just impossible, then you're saying the framework is more limited, which is fine but sometimes you want flexibility. This seems to be a 'best practice' issue as well that can be avoided through PR review. My team has been putting logic more and more into local hook files to kee…

There's nothing inherently stopping people from writing clean react projects. But I've never seen one. But watching people fumble around trying to find where they need to make a change when things are so overly abstracted, and STILL try to justify that react is good, is baffling. People break tables up into ~50+ files. It's crazy, and everyone does this, and its an absolute nightmare to maintain. Its 100% engrained i…

So, I have not used React more than a tutorial here and there. Same with any of the other SPA libraries.

I do not understand why everything needs to be a single page application. Sure, my current employer is behind the times in the technology we use, but honestly, we survive just fine with server side rendering and plain, ol'boring, vanilla Javascript and a little JQuery here and there.

Of course, some things we have written are difficult to maintain at times, but I doubt any other library would have really made it simpler (more of an issue with the requirements than the technology). Abstraction is simple, for us at least.

Re: React is holding me hostage

#477

Post by hirvi74 »

adql wrote: post #363
azangru wrote: post #347

Earlier quoted context omitted.

How is this example from vue docs: preferable to the jsx version: or even this loop example from the vue docs: {{ item.message }} better than its jsx counterpart? items.map(item => ( {item.message} ))

Both look like ye olde PHP code mixed with HTML tbh.

"History does not repeat itself, but it often does rhyme" - Mark Twain (at least he is attributed with this saying).

Re: React is holding me hostage

#478

Post by jokethrowaway »

vinay427 wrote: post #257
dagorenouf wrote: post #240

Earlier quoted context omitted.

That’s highly dependent on the type of product / customers you have. If you’re running an online shop selling ice cream, going from 100ms to 2ms list sorting speed isn’t gonna get you more sales. I’d argue most online products are ice cream shops to some degree.

The data seems to indicate otherwise: https://www.gigaspaces.com/blog/amazon-found-every-100ms-of-... > A 2017 Akamai study shows that every 100-millisecond delay in website load time can hurt conversion rates by 7% > 10 years ago, Amazon found that every 100ms of latency cost them 1% in sales

That study doesn't prove anything.

You're not amazon

That said, having a performant website is nice, both for developer experience and for users.

I have to say I pick solid because it's so damn fast (okok, and because it has an API which is React-like but without the crap doesn't make sense or an extra custom runtime just because)

Re: React is holding me hostage

#479

Post by yashap »

pcthrowaway wrote: post #124
yashap wrote: post #93

As a more backend guy who does some frontend, the main thing I like about React over alternatives like Svelte, Vue and SolidJS is React Native. React is maybe not perfect for the web, but it’s very, very good, and it’s also quite good for mobile via React Native. The more purely web-focused libs/frameworks have far inferior (or no) mobile options, while other cross-platform frameworks, like Flutter, suck on the web.…

There is also https://svelte-native.technology/ (and I suspect similar projects for other frameworks) though I haven't used any of the "* Native"s

Ooh interesting! Similar to React Native in that it’s a JS interface to native components, didn’t know about this, worth a look!

Re: React is holding me hostage

#480

Post by colin_jack »

codeptualize wrote: post #183
thegeomaster wrote: post #141

Earlier quoted context omitted.

How is performance not important in this context? React is very sluggish when updating many elements at once, for not very large values of "many". With some regularity, I've debugged React+MobX jank issues where a bigger update, such as switching from one panel to another, takes upwards of 200ms on a mid- or low-range machine. None of this is perceptible on our beefy dev boxes, which is why I think people disregard i…

> the modern webapp experience is so miserable for the average person. I see this claim a lot and I'm curious what this is based on, can somebody drop some links to further reading?

This is part of a whole series of posts:

https://infrequently.org/2022/12/performance-baseline-2023/

Post reply on HN