Pagination
Problem statement
A Pagination component is a fundamental building block of any data-heavy application — tables, product listings, search results, and dashboards all rely on it. Your task is to build a Pagination component in React that renders page number buttons, handles navigation between pages, and shows an ellipsis (...) for large page counts so the control doesn't become unwieldy.
This question tests your mathematical thinking (deriving total pages, computing the visible page range), your understanding of controlled components (Pagination owns no state — the parent does), and your attention to UX details like disabling boundary buttons and marking the current page for accessibility.
Your implementation should accept totalItems, itemsPerPage, currentPage, and onPageChange as props, and call onPageChange with the new page number when the user navigates.
Requirements & constraints
- Calculate total pages from totalItems and itemsPerPage
- Render page number buttons with the current page highlighted
- Previous and Next buttons, disabled when at the first or last page
- Ellipsis (...) shown when the page range is too large to show all buttons
- Always show the first page, last page, current page, and pages adjacent to current
- Call onPageChange(pageNumber) when any page button is clicked
- aria-current='page' on the active page button
How to approach Pagination
The strategy an interviewer expects you to reach for.
Problem Understanding Pagination has a tricky-sounding requirement but a clean solution once you break it down. The key architectural insight that interviewers look for is this: Pagination is a controlled component with zero internal state. It does not know what page it's on. Its parent knows, and passes currentPage down as a prop. Pagination just renders what it's told and calls onPageChange when the user interacts. This controlled component model is the correct design, and saying it explicitly signals that you understand React's data-flow philosophy.
The full solution is part of HelloFrontend Pro
The question above is free to read in full. Upgrade to unlock the interactive workspace and the senior-level walkthrough that go with it.
- Live React sandbox pre-wired for this component
- Time-boxed checkpoints that mirror a real 45-minute round
- Interviewer scoring criteria and a full reference implementation
Already a member? Log in to open the workspace.