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]