TkDodo

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…

It was more of a general misunderstanding on how React Query is supposed to work, partially triggered by some mistakes in defining the query keys that meant that React Query didn't work as intended.

I'd recommend this blog post (or actually all blog posts on React query on that site):

https://tkdodo.eu/blog/effective-react-query-keys

What I observed was that the query keys were not consistently defined, which broke automatic refetching when the data was modified and invalidated. So the developer added some manual refetches because they thought React Query couldn't handle that automatically.

You need a consistent structure for your query keys and use that everywhere. Then you only need to make sure to invalidate the correct part of the query key hierarchy and the rest works automatically.