Duplicated fetching with React Query + React Table + Virtual and MUI Table
Hi everyone,
I am trying to create a virtual table with query + table + virtual.
I am using the following versions:
"@tanstack/react-virtual": "3.0.2",
"react-table": "7.7.6",
"react-query": "3.23.2",
"react": "17.0.2"
However I get duplicated fetch requests in the useEffect.
I have attached an image with the console log and the code that I am trying to debug. What could be the reason for having duplicated requests on scroll ?
Thank you
2 Replies
national-gold•2y ago
Hi, are you using StrickMode? https://react.dev/reference/react/StrictMode#fixing-bugs-found-by-re-running-effects-in-development
it's a default behaviour in react 18 + strick mode
Your components will re-run Effects an extra time to find bugs caused by missing Effect cleanup.
– React
The library for web and native user interfaces
harsh-harlequinOP•2y ago
Unfortunately I am not using React 18 😄 I kind of reduced the issue to MUI and Table components. The library works as expected with normal divs.
I still couldn't figure this out, I have alternating heights between rows, the library is making the requests on scrolling. (I am printing the items from getVirtualItems()) There is too little documentation. The examples are not enough for a complex MUI table using table components. The only thing I could find was for react-virtual, but the library is almost completely different.