diff --git a/src/components/VirtualTable/VirtualTable.tsx b/src/components/VirtualTable/VirtualTable.tsx index 09d0cf036..d360dd42b 100644 --- a/src/components/VirtualTable/VirtualTable.tsx +++ b/src/components/VirtualTable/VirtualTable.tsx @@ -76,7 +76,7 @@ export const VirtualTable = ({ const [error, setError] = useState(); - const [pendingRequests, setPendingRequests] = useState>({}); + const pendingRequests = useRef>>({}); const fetchChunkData = useCallback( async (id: string) => { @@ -105,10 +105,13 @@ export const VirtualTable = ({ } }, DEFAULT_REQUEST_TIMEOUT); - setPendingRequests((reqs) => { - reqs[id] = timer; - return reqs; - }); + // Chunk data load could be triggered by different events + // Cancel previous chunk request, while it is pending (instead of concurrentId) + if (pendingRequests.current[id]) { + const oldTimer = pendingRequests.current[id]; + window.clearTimeout(oldTimer); + } + pendingRequests.current[id] = timer; }, [fetchData, limit, sortParams], ); @@ -117,20 +120,27 @@ export const VirtualTable = ({ dispatch(initChunk(id)); }, []); - const onLeave = useCallback( - (id) => { - dispatch(removeChunk(id)); + const onLeave = useCallback((id) => { + dispatch(removeChunk(id)); + + // If there is a pending request for the removed chunk, cancel it + // It made to prevent excessive requests on fast scroll + if (pendingRequests.current[id]) { + const timer = pendingRequests.current[id]; + window.clearTimeout(timer); + delete pendingRequests.current[id]; + } + }, []); - // If there is a pending request for the removed chunk, cancel it - // It made to prevent excessive requests on fast scroll - if (pendingRequests[id]) { - const timer = pendingRequests[id]; + // Cancel all pending requests on component unmount + useEffect(() => { + return () => { + Object.values(pendingRequests.current).forEach((timer) => { window.clearTimeout(timer); - delete pendingRequests[id]; - } - }, - [pendingRequests], - ); + }); + pendingRequests.current = {}; + }; + }, []); // Load chunks if they become active // This mecanism helps to set chunk active state from different sources, but load data only once