speedup devtools

[TkDodo]

Describe the bug

With #2045, we made a temporary speedup of the devtools to have them not receive any events when they are closed.

while this might be okay, the devtools are still slow with many active observers of the same query when they are open.

I have outlined a path in this comment:

• port the devtools to TypeScript. It is a .tsx file but there is a // @ts-nocheck annotation at the top, so it's really just the ported js version. I personally can't do much without types 😆 .
• don't put the whole unsortedQueries into the state. instead, when a subscription is triggered, compute what we need for the devtoolsPanel, something like a QueryView object. Then, we can do a deep or shallow equal check on that "view" and only call the local setState if something really changed. it should make sure that only updates are really triggered if something visible in the devtools changes.

devtools are now in TypeScript, so "only" the second part is left.

sandbox with showing the slow devtools when they are opened: https://codesandbox.io/s/react-query-slow-devtools-0rlcd

/edit: might also not be so easy because every update that the devtools receive decrease the observerCount by one (which we are interested in) - and the Explorer actually even shows all observers with their details ...

[TkDodo]

with fine-grained subscriptions in v4 (react-18), this is now a lot faster: https://codesandbox.io/s/react-query-slow-devtools-0rlcd?file=/src/App.js

[TkDodo]

@prateek3255 fixed this in the react-18 branch with fine-grained subscriptions 🙌