Pagination means loading a limited portion of a large dataset instead of requesting every record at once. For example, instead of downloading 100,000 products, the application might request 20 at a time. ### Basic Pagination Request A [REST API](/courses/expressjs) might support: ```text GET /api/products?page=1&limit=20 ``` The backend could return: ```json { "items": [ { "id": "1", "name": "Keyboard" }, { "id": "2", "name": "Mouse" } ], "page": 1, "limit": 20, "total": 245, "totalPages": 13 } ``` ### React Pagination Example ```jsx import { useEffect, useState } from "react"; function Products() { const [page, setPage] = useState(1); const [products, setProducts] = useState([]); const [totalPages, setTotalPages] = useState(1); const [loading, setLoading] = useState(false); useEffect(() => { const controller = new AbortController(); async function loadProducts() { try { setLoading(true); const response = await fetch( `/api/products?page=${page}&limit=20`, { signal: controller.signal } ); if (!response.ok) { throw new Error("Unable to load products"); } const data = await response.json(); setProducts(data.items); setTotalPages(data.totalPages); } catch (error) { if (error.name !== "AbortError") { console.error(error); } } finally { setLoading(false); } } loadProducts(); return () => { controller.abort(); }; }, [page]); return (

{loading &&

} {products.map((product) => (

{product.name}

))} Page {page} of {totalPages}

); } ``` ### Why Pagination Should Usually Happen on the Server This is not real server pagination: ```javascript const allProducts = await fetch("/api/products"); const pageItems = allProducts.slice(0, 20); ``` The browser still downloaded every record. With server pagination: ```text Browser asks for page 1 → backend returns only page 1 ``` This reduces unnecessary: ```text Network transfer Memory usage Backend response size Rendering work ``` ### Offset Pagination A backend may internally use: ```text page=3 limit=20 ``` or: ```text offset=40 limit=20 ``` This is easy to understand and works well for many traditional lists. ### Cursor Pagination Large or frequently changing feeds may instead use a cursor: ```text GET /api/posts?cursor=abc123&limit=20 ``` Response: ```json { "items": [], "nextCursor": "xyz789" } ``` Conceptually: ```text Offset pagination → give me page number N Cursor pagination → give me records after this position ``` Cursor pagination can be useful for feeds or datasets where records are frequently added while users are browsing. ### Reset Page When Filters Change Suppose a user is on: ```text page 8 ``` and changes category. The new category may only have two pages. It is usually sensible to reset: ```javascript setPage(1); ``` when major filters or search criteria change. ### Keep Pagination in the URL When Useful For pages where users may share or revisit results, storing pagination in the URL can be useful: ```text /products?page=3 ``` Benefits can include: ```text Shareable links Browser back/forward behavior Refresh persistence Clear navigation state ``` ### Related Questions to Learn More For request cancellation and state handling, see: ```text Data Fetching in React → How Do You Cancel API Requests and Prevent Race Conditions in React? → How Do You Handle Loading, Error, Empty, and Success States When Fetching Data in React? → What Is Data Caching in React and Why Is It Important? ``` ### Interview-Ready Answer API pagination in [React](/courses/reactjs) loads a limited subset of records from the server using page/limit, offset/limit, or cursor-based parameters. The UI tracks the current pagination state and requests new data when that state changes. Server-side pagination avoids downloading entire datasets, and pagination should usually coordinate with filters, search, request cancellation, caching, and URL state where appropriate.