TanStackT
TanStack•3y ago•
29 replies
hurt-tomato

Devtools performance

Hi all,

My post is related to Devtools. I'm facing severe performance issues as soon as Devtools are open and my queryCache contains a certain number of queries (>50). The query keys are built from a key factory and are then structured (array of 1 Object) and sometimes long.

I had no time yet to setup a codesandbox but I made a (bad) video to illustrate the problem, based on the basic React example.

It looks like the Devtools are performing lookups in the cache too often, leading to an important number of calls to hashKey, which has a cost since serialising a lot of objects. The more queries you have, the worse it gets.

In the video, the queryCache has been hydrated with ~130 queries from our app.

My knowledge of SolidJS is almost null but I tried to add some logs in Devtools to highlight the time spent in the "state" callback:

const queryState = createSubscribeToQueryCacheBatcher((queryCache) => {
  console.time('queryState callback')
  const state = queryCache().find({
    queryKey: props.query.queryKey,
  })?.state
  console.timeEnd('queryState callback')
  return state
})



On first load, the state callback is pretty quick to execute but it is executed a lot. Maybe ok since the first load?
On navigation, we can see that it is still executed quickly but there are way more calls to it.

Does anyone experiment the same issue? I could keep on diving on this but my knowledge of SolidJS might be a show-stopper…

Thanks!
Was this page helpful?