0

I am using React Query in my React app, when I using enabled option to tell a query when it is ready to run, it is still persists to the cache as disabled even if this query not execute. I wonder if these disabled caches are causing cache resource leaks and affect to performance? What if there is too much redundant cache when it not enabled?

For example:

const {
  status,
  fetchStatus,
  data: projects,
} = useQuery({
  queryKey: ['projects', userId],
  queryFn: getProjectsByUser,
  // The query will not execute until the userId exists
  enabled: !!userId,
})

When enabled is false, React Query will be persist to cache like below:

   ['projects', undefined]

And when enabled is true:

   ['projects', 123]

At this time, the cache memory will existing 2 caches:

   ['projects', undefined] // <--- unnecessary
   ['projects', 123]
Epple
  • 640
  • 14

0 Answers0