Pagination
Pagination
Pagination allows APIs to return data in smaller chunks rather than all at once, which is essential for performance when working with large datasets such as product catalogs or social media feeds.
Common Pagination Patterns
- Offset-based Pagination – Uses page number and page size parameters.
- Cursor-based Pagination – Uses a reference point (cursor) to fetch the next set of results.
Offset-Based Pagination Example
javascript
const response = await axios.get('/products', {
params: { page: 2, limit: 20 },
});
Cursor-Based Pagination Example
javascript
const response = await axios.get('/products', {
params: { cursor: lastItemId, limit: 20 },
});
Managing Pagination State
javascript
const [page, setPage] = useState(1);
const [items, setItems] = useState([]);
const [hasMore, setHasMore] = useState(true);
async function loadMore() {
const response = await axios.get('/products', { params: { page } });
setItems((prev) => [...prev, ...response.data.items]);
setHasMore(response.data.hasMore);
setPage((prev) => prev + 1);
}
Combining Pagination with FlatList
javascript
{item.name} }
/>
Avoiding Duplicate Requests
Track a loading flag specifically for pagination requests to prevent onEndReached from triggering multiple simultaneous requests while a previous page is still loading.
Conclusion
Implementing pagination correctly, combined with FlatList’s onEndReached behavior, allows React Native applications to efficiently handle large datasets without overwhelming the device or the network.
