Pagination in React — React Technical Interview Questions & Answers

Pagination in React

Pagination in React

  • 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.

Technical Interview Tip: slice or server page param.

Code Examples for Pagination in React

Example

// 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.

How to Explain Pagination in React to an Interviewer

Explain Pagination as if you are teaching a junior — definition, then one tiny UI.

State : page. Window : slice or API param.

Write 5–10 lines that use Pagination and say what the UI does.

Show JSX Say the screen

What mistake do freshers make with Pagination?

UI lib optional.