React · Theory
page + pageSize, slice(start, start + size). Next increments page. Disable Next on the last page. Server pagination: pass page to the API instead of slicing a giant client array. react-paginate is a UI helper — you still own the data window.
Pagination in React — page 0 → a, b. Next → c, d. slice does the window.
slice or server page param.
// Pagination
import { useState } from "react";
const ALL = ["a", "b", "c", "d", "e"];
export default function Pages() {
const [page, setPage] = useState(0);
const size = 2;
const chunk = ALL.slice(page * size, page * size + size);
return (
<div>
<p>{chunk.join(", ")}</p>
<button onClick={() => setPage((p) => p + 1)}>Next</button>
</div>
);
}
Pagination in React — page 0 → a, b. Next → c, d. slice does the window.