T
TanStack•2y ago
rival-black

Which vars to watch as dependencies for a 'table updated/sorted/repaginated' useEffect?

I have a paginated, sortable React (NextJS) table listing 500+ items. And I want to make a secondary, expensiveAPI call for only the 50-100 visible rows in the table each time it re-renders, then augment the table with this extra data. Currently I'm only watching pagination in the dependency array because it seems that sorting also triggers pagination. However, this approach logs the visible rows twice in quick succession. Is there a more efficient way to do this? What should be in the dependency array to catch all table updates? 
    const table = useReactTable({
        data: tableData,
        columns,
        state: {
            sorting,
            pagination,
        },
        onSortingChange: setSorting,
        onPaginationChange: setPagination,
        getCoreRowModel: getCoreRowModel(),
        getSortedRowModel: getSortedRowModel(),
        getPaginationRowModel: getPaginationRowModel(),
    })

    React.useEffect(() => {
        const currentTime = new Date().toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
        // Slice table data to get current page
        const currentPageData = tableData.slice(
            pagination.pageIndex * pagination.pageSize,
            (pagination.pageIndex + 1) * pagination.pageSize
        );
        // Get list of visible contract addresses in the table...
        const currentContractAddresses = currentPageData.map(row => row.address);
        console.log("=====================\n",currentTime, "Currently visible:", '\n', currentContractAddresses);
        // TODO: check if visible addresses have changed from last time
        // TODO: make secondary API calls for just these addresses

    }, [pagination ]); // Don't need to include 'sorting' or 'tableData' as surely these trigger re-pagination?
    const table = useReactTable({
        data: tableData,
        columns,
        state: {
            sorting,
            pagination,
        },
        onSortingChange: setSorting,
        onPaginationChange: setPagination,
        getCoreRowModel: getCoreRowModel(),
        getSortedRowModel: getSortedRowModel(),
        getPaginationRowModel: getPaginationRowModel(),
    })

    React.useEffect(() => {
        const currentTime = new Date().toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
        // Slice table data to get current page
        const currentPageData = tableData.slice(
            pagination.pageIndex * pagination.pageSize,
            (pagination.pageIndex + 1) * pagination.pageSize
        );
        // Get list of visible contract addresses in the table...
        const currentContractAddresses = currentPageData.map(row => row.address);
        console.log("=====================\n",currentTime, "Currently visible:", '\n', currentContractAddresses);
        // TODO: check if visible addresses have changed from last time
        // TODO: make secondary API calls for just these addresses

    }, [pagination ]); // Don't need to include 'sorting' or 'tableData' as surely these trigger re-pagination?
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?