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...