How to use /display only the latest pageIndex value for controlled pagination

[elevatethegame]

I want to have a display message showing the total number of items on the current page. Something like:

Showing 1-10 of 124 items

Using the provided example for controlled pagination at react-table-controlled-pagination-example, this works by making a very slight change to the code:

<tr>
            {loading ? (
              // Use our custom loading state to show a loading indicator
              <td colSpan="10000">Loading...</td>
            ) : (
              <td colSpan="10000">
                {/* Change is here */}
                Showing {rowCount ? pageIndex * pageSize + 1 : 0}-{pageIndex * pageSize + page.length} of {rowCount} items
                {/* Showing {page.length} of {rowCount} results */}
              </td>
            )}
</tr>

The above works perfectly fine when clicking the left and right page buttons.

However, when I add useAsyncDebounce to debounce my fetch data function, when I click left or right page buttons, there will be a double render, once with the new pageIndex, old data and page.length properties, and the second time with the updated pageIndex and the new data.

This results in a quirky observable behavior where if I have a pageSize of 10 rows per page with a total of 2 pages but only 4 rows on the second page, going from the first page to the second page will change the display from Showing 1-10 of 14 items to Showing 11-20 of 14 items very briefly before finally display Showing 11-14 of 14 items.

I am guessing this happens because the pageIndex is being changed before the data due the debouncing of fetching data. Therefore, the new pageIndex causes the first render to happen even when the old data is still present.

I have included the code here so that you can see this behaviour (almost everything is unchanged from the controlled pagination example, except for the addition of useAsyncDebounce):

controlled-pagination-with-async-debounce

When you click the left and right page buttons, you can see for a brief moment the old data's length is still present and used to compute the number of items shown on the page, which is wrong.

The "intermediate" render that I hope to be able to get rid of:

Any idea on how to circumvent this issue? Have been searching for quite some time but did not find anyone with a similar difficulty.

[kombuchafox]

              <td colSpan="10000">
                Showing {rowCount ? pageIndex * pageSize + 1 : 0}-
                {Math.min((pageIndex + 1) * pageSize, rowCount)} of {rowCount} items
                {/* Showing {page.length} of {rowCount} results */}
              </td>

I changed it to this and it seems to be working

[elevatethegame]

Hey @kombuchafox , thanks for taking the time to reply!
Will try this out and see if it works! 😀

From the looks of it it seems like it will work

[elevatethegame]

@kombuchafox it works!
Thanks, you are awesome! 😊