Skip to content
Permalink
Browse files

Upgrade controlled pagination example for deduped fetching

  • Loading branch information...
tannerlinsley committed Oct 8, 2019
1 parent f1ad032 commit 227f7905b0549902d93c6aa817784f366ce1823e
Showing with 14 additions and 7 deletions.
  1. +14 −7 examples/pagination-controlled/src/App.js
@@ -240,26 +240,33 @@ function App() {
const [data, setData] = React.useState([]);
const [loading, setLoading] = React.useState(false);
const [pageCount, setPageCount] = React.useState(0);
const fetchIdRef = React.useRef(0);

const fetchData = React.useCallback(({ pageSize, pageIndex }) => {
// This will get called when the table needs new data
// You could fetch your data from literally anywhere,
// even a server. But for this example, we'll just fake it.

// Give this fetch an ID
const fetchID = ++fetchIdRef.current;

// Set the loading state
setLoading(true);

// We'll even set a delay to simulate a server here
setTimeout(() => {
const startRow = pageSize * pageIndex;
const endRow = startRow + pageSize;
setData(serverData.slice(startRow, endRow));
// Only update the data if this is the latest fetch
if (fetchID === fetchIdRef.current) {
const startRow = pageSize * pageIndex;
const endRow = startRow + pageSize;
setData(serverData.slice(startRow, endRow));

// Your server could send back total page count.
// For now we'll just fake it, too
setPageCount(Math.ceil(serverData.length / pageSize));
// Your server could send back total page count.
// For now we'll just fake it, too
setPageCount(Math.ceil(serverData.length / pageSize));

setLoading(false);
setLoading(false);
}
}, 1000);
}, []);

0 comments on commit 227f790

Please sign in to comment.
You can’t perform that action at this time.