Live data from Hacker News

React is winning by default and slowing innovation

lorenstew.art

631–640 of 866 posts

Re: React is winning by default and slowing innovation

#631

> Hooks addressed class component pain but introduced new kinds of complexity: dependency arrays, stale closures, and misused effects. Even React’s own docs emphasize restraint: “You Might Not Need an Effect”. Server Components improve time-to-first-byte, but add architectural complexity and new failure modes. There are a lot of valid criticisms of React, but I don't think this is one of them. These problems are not…

The dependency array thing is really easy if you use eslint with the react rules of hooks.

I'd say that most of the time, that's the wrong thing to do. For the vast majority of effects, you don't actually want to call it for every variable that's referenced in it. A good example is literal arrays, functions, and so on, if you have a prop that's an inline function definition, you'll be calling the effect on every render because the reference is new. You could work around this by memoing every inline function definition, but at that point, what are we even talking about. Hooks are a leaky abstraction, and while they do solve many real problems, they come with a lot of heavy baggage once you get into the thick of it.

Re: React is winning by default and slowing innovation

#632

Earlier quoted context omitted.

Fair. My bitching would've been better expressed as "I groan every single time I attempt to violate a hook rule." Which is a lot, because I'm new to React. It's almost certainly a "skill issue", but hooks are NOT just "JavaScript functions", contrary to React marketing PR. My conditional beef: in my app, users can choose between using the built-in mic for speech recognition or a 3rd party service (LiveKit). If the us…

Yeah, this is a really annoying thing about how hooks work. For whatever reason (I'm sure they have a great reason) React can't do hook state book-keeping correctly without tying it to a function component lifecycle. I think you actually can conditionally render a hook but that choice has to last for the entire rendered lifetime of the component. But that doesn't really help you when your user can switch between them…

Hooks can call other hooks, and all the built-in hooks rely on setState at the bottom. setState is state for the individual component. It keeps track of state across multiple calls with an indexed array - the first call is index 0, second call is index 1, and so on - that's why no key is needed to identify which setState call is which.

All the oddness about hooks fall out of that implementation. They can only be used inside components because they rely on component state management, and having to be called at the top level is a simplification of "hooks must always be called in the same order the same number of times" (no conditionals or loops) because otherwise the setState index gets messed up and you're getting the wrong state back when it's called.

Re: React is winning by default and slowing innovation

#633

Earlier quoted context omitted.

> So JSX is pure Javascript and not, say, a dialect of XML embedded in JS? It would be best to think of it as syntax sugar for create Element() function calls. You enter JSX with angle tags and insert expressions in braces > React is full of magic syntax that looks like functions, but e.g. you can't call them inside an if statement, or you have to redundantly declare the 'dependencies' (variables you read) and so on…

Hooks are magic syntax without any doubt. All magic syntax is made up of non-magic parts, that's kinda the point. The way you know it's magic is it shatters the principle of referential identity, which tells you that a variable is itself. It pretends you can use a simpler mental model but you really cannot and must not.

Hooks aren't magic syntax. The problem with hooks has nothing to do with syntax. The problem is that the React crowd has decided to overload the meaning of a term that has had a reasonably solid interpretation (at least in comparison to the React crowd).

"React Functional Components" have nothing to do with conventional functional programming. They inherently (intentionally?) violate the spirit of functional programming through hidden global variables, while pretending that it is still functional, when in reality they should be doing the opposite. They should be upfront about the hack that hooks are. They are not functional, they are merely functions. In all other respects they operate as if the function was a method inside a class and that all hook calls are with respect to an invisible "this" keyword that contains the component's context. Since hooks are not named (which would expose their inherently pseudo-OOP nature), they associate their state through a hidden incrementing counter. It's like you're sweeping all the OOP parts under the rug to pretend to be functional so you can be a cool functional hippie too.

Re: React is winning by default and slowing innovation

#634
Biggest problem is with the approach of doing a revolution, while evolution is possible. Reactivity is mentioned in the article and examples are given with frameworks that would need a rewrite of anything you have in react and relearning everything for the team.

But it's really not needed - you can just use signals in react with the preact-signals package (works with preact and react and standalone) which has been created 3 years ago: https://preactjs.com/blog/introducing-signals It can even skip the virtual dom and diffing.

The issue is not React per se. Just look at what the ecosystem has to offer. You can also speed up your loading times by using preact. And if you don't like a compile step use a package like htm and tagged templates for a JSXish syntax. And then move your "store" outside of react with signals etc. There is enough innovation happening, no need to always look at the other side.

Re: React is winning by default and slowing innovation

#635
post #472

React isn’t just "winning by default" It's winning because at the core it's just JavaScript function composition. A component is a function, conditionals are `if (...) { ... } else { ... }`, loops are `map()`. JSX is just sugar for function calls. In Svelte you are writing XML with little JavaScript islands inside it. Instead of if you get `{#if}{:else}{/if}`. Thats not "ergonomic" – thats a mini-language stapled on…

> React isn’t just "winning by default" It's winning because at the core it's just JavaScript function composition. A component is a function, conditionals are `if (...) { ... } else { ... }`, loops are `map()`. JSX is just sugar for function calls.

I agree with JSX, and function components are nice, but React is most definitely not just function composition. Hooks add state and introduce life cycle events that take components way beyond stateless territory, to the point that it would be far easier to reason about them if they were class components with properties and decorators and handlers invocable through inversion of control.

Re: React is winning by default and slowing innovation

#636
post #472

React isn’t just "winning by default" It's winning because at the core it's just JavaScript function composition. A component is a function, conditionals are `if (...) { ... } else { ... }`, loops are `map()`. JSX is just sugar for function calls. In Svelte you are writing XML with little JavaScript islands inside it. Instead of if you get `{#if}{:else}{/if}`. Thats not "ergonomic" – thats a mini-language stapled on…

Please. Let’s get real about the biggest issue with Svelte/Vue/Solid: it wasn’t written by Meta, and had no chance at the clout game that is essential for mindshare. (Not saying React is bad, just that DSLs impeding adoption rings hollow in light of Tailwind/JSX.)

Doesn't Meta also use Vue?

Re: React is winning by default and slowing innovation

#637

Earlier quoted context omitted.

Hooks are also just JavaScript functions...?

Based on how they are run they are completely not just ordinary JavaScript functions, hook era components are also not just JavaScript functions, it's a very complicated system. React calling them "just functions" is untrue, just marketing buzz words, and it leads developers into traps.

> React calling them "just functions" is untrue

I'm pretty sure this is also untrue. AFAIK React has never used that phrase (and at the very least, I can't find it anywhere official right now), it came from other people convincing newcomers that hooks aren't something more complicated like objects (comparing to class-based components). React has always treated them as special functions, hence always prefixing them with the word "use".

Re: React is winning by default and slowing innovation

#638

Earlier quoted context omitted.

> So JSX is pure Javascript and not, say, a dialect of XML embedded in JS? It would be best to think of it as syntax sugar for create Element() function calls. You enter JSX with angle tags and insert expressions in braces > React is full of magic syntax that looks like functions, but e.g. you can't call them inside an if statement, or you have to redundantly declare the 'dependencies' (variables you read) and so on…

Hooks are magic syntax without any doubt. All magic syntax is made up of non-magic parts, that's kinda the point. The way you know it's magic is it shatters the principle of referential identity, which tells you that a variable is itself. It pretends you can use a simpler mental model but you really cannot and must not.

> The way you know it's magic is it shatters the principle of referential identity, which tells you that a variable is itself

When you do a useValue() it is clear you are grasping at something with a larger lifespan than your function.

Conceptually it is not much different than

    int counter() {
      static int x = 1;
      return x++;
    }
Which predates C89, if age is an argument

Re: React is winning by default and slowing innovation

#639
post #41
post #30

Earlier quoted context omitted.

[flagged]

Next time I would recommend to just wait until you’re less emotional and respond then. Your comment now doesn’t really add anything to the conversation, whereas one with a level head might.

Thanks for adding to the conversation

Re: React is winning by default and slowing innovation

#640
post #472

React isn’t just "winning by default" It's winning because at the core it's just JavaScript function composition. A component is a function, conditionals are `if (...) { ... } else { ... }`, loops are `map()`. JSX is just sugar for function calls. In Svelte you are writing XML with little JavaScript islands inside it. Instead of if you get `{#if}{:else}{/if}`. Thats not "ergonomic" – thats a mini-language stapled on…

Both SolidJs and Qwik keeps the JSX syntax!
Post reply on HN