React warning after removeQueries
I am using RQ to infinite cache results of API by id of element but want re-fetch if user goes to another if and back.
e.g. if we multiple times query with id=1 API is called only once, but once we go to query id = 2 and back I want to re-fetch.
Here is code snippet
const useMyData = (key: string) => {
var queryclient = useQueryClient();
var currentQuery = useQuery({
queryKey: ['dataCommonKey', key],
queryFn: fetchDataForKey(key),
});
queryclient.removeQueries({ queryKey: ['dataCommonKey'], type: 'inactive' });
return currentQuery;
};
It all works fine but sometimes I get react warning with origination inside RQ.
react-dom.development.js:67 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
If I delete removeQueries call then no warning occurs.
Is this smth I should worry about or can just ignore? Or any suggestion what i should change in the code not to get this?
8 Replies
rival-black•4y ago
This warning is discussed here: https://github.com/reactwg/react-18/discussions/82. So you could ignore it. Question: why do you manually remove queries from the cache?
deep-jadeOP•4y ago
Thanks for this. I am happy to ignore it.
What other option would you suggest in my case? As I mentioned I want to clear/invalidate all cache for other keys when I request data for new key.
rival-black•4y ago
Sorry I did not read the whole need… I'm not sure to see why this is a problem to keep previous data but that's your stuff 😉
Please note that the
removeQueries call in your code is NOT guaranteed to be done after the new fetch. To do so, you would have to use the onSuccess prop of useQuery. Don't know if it is ok or not for your use-casedeep-jadeOP•4y ago
Well I will try to give if you want.... This query is fetching details of records in the grid when user selects them. I also have SignalR connection that sends live events about server changes so I can keep currently cached query data up to date. I really do not want to have to much details data cached on client side and I am happy to re-fetch when record change but not more frequently.
I do know that I have to use onSuccess i put in sequentially there for readability purpose - my bad...
rival-black•4y ago
"Well I will try to give if you want.... " I don't want anything 😉
TS Query is powerful enough to let you achieve your use-case the way you want. I just wanted to highlight things that are "not common".
You could also define a small cacheTime to automatically clean unused queries from the cache. The default one is 5min.
deep-jadeOP•4y ago
Yes I know that. Problem is that there is no notification mechanism for me to know when this cache timeout clean-up occurs. And I need to release some resources(Rx observers etc.) that have lifetime same as cached query.
rival-black•4y ago
👌. I’m not sure to be able to help on that.
deep-jadeOP•4y ago
well you already helped me confirming this warning could be ignored 🙂