Comment by CharlieDigital

Comment by CharlieDigital 11 hours ago

Actually, React's problem is that it's the inverse of how HTML and JavaScript works in terms of how to handle callbacks. Of the major UI frameworks, it is the only one with this quality (Vue, Svelte, Angular, Solid, etc. use signals).

This inverted behavior is the cause of most of the pain and footguns in React and React Hooks because the way state behaves in a React component is not the way state behaves in any other front-end JS one would normally write.

That's why I think for some folks who started with HTML + vanilla JS, React Hooks just feels wrong. It points the reactive callback to the component function whereas every other framework/library uses some sort of signal to point the reactive callback to a handler. Because React points the callback to the component function, then you have to be really cautious about where you put state inside of a component[0][1][2]

Even You wrote this about React's design choice which I think sums it up best:

    > The pain and suffer[ing] of hooks all roots from the mismatch between a dogmatic belief in the superiority of immutability and the harsh reality of the host language that is JavaScript

If you want to "feel" this for yourself, here are a series of JSFiddles:

- Vanilla: https://jsfiddle.net/qtmkbdo2/8/

- Vue: https://jsfiddle.net/vys2rmup

- React: https://jsfiddle.net/0gjckrae/1/

It should be obvious that Vanilla and Vue behave like how one would expect callbacks to work. React, because it points the callback to the component function, then requires that you be cognizant of state inside of the component function (placement, memoization, immutability, etc.). All of the pain of React is self-imposed from this design decision.

You can read more about it here: https://chrlschn.dev/blog/2025/01/the-inverted-reactivity-mo...

[0] https://adevnadia.medium.com/i-tried-react-compiler-today-an...

[1] https://tkdodo.eu/blog/the-useless-use-callback

[2] https://adevnadia.medium.com/react-re-renders-guide-why-reac...

auxiliarymoose 5 hours ago

Here is an alternative vanilla approach that uses a single-file/single-class-declaration custom element without Shadow DOM: https://jsfiddle.net/auxiliarymoose/tcgk1Ljv/98/

Usually I write a few helper functions to streamline working with elements, attributes, and registration of element + CSS. But even without those, I think this approach provides a good level of simplicity without introducing libraries or frameworks.

Reply View 0 replies

pverheggen 10 hours ago

Technically in React, the reactive callback is still the event handler. It's a two-step process where your event handler is evaluated first, then re-evaluates the component tree which changed as a result of the handler. In your JSFiddle example, if you modify `onChange` to print a console log instead of setting state, you'll see that it doesn't run the component function again.

So really, the key difference between React and Vue is that your function component is not the setup, it's the template.

Reply View 2 replies

CharlieDigital 3 hours ago

I don't know if I'd consider that the reactive callback because there's no change in state if I only put the `console.log` in `onChange`. The point of the reactive callback is to be invoked on a change in state and in this case, that is the component function would you agree?
In Vue, for example, when I set up a `watch`, the change in state only invokes the callback that is wired to the state. In React, the entire component function is invoked again on a change of state.

Reply View | 0 replies
b_e_n_t_o_n 7 hours ago

Yeah that's a pretty good way of putting it. In Vue et al, the script tag is a constructor and the template is a render function. In react, you just write a render function and use hooks to define stuff that otherwise would have been in the constructor.

Reply View | 0 replies