Load More Pagination

Performance — Beginner React challenge.

Build a classic 'Load More' list. Instead of rendering everything at once, show only the first page of items and let the user reveal more, one page at a time, by clicking a button.

Requirements

• Initially render only the first `pageSize` items.
• Render each visible item inside data-testid="list-item".
• A 'Load More' button (data-testid="load-more") reveals `pageSize` more items each click.
• The last click reveals only the remaining items, never more than the total.
• Once every item is visible, the button is removed from the DOM entirely.
• A status line (data-testid="count") always reads 'Showing X of Y'.

Signature

function LoadMoreList({ items: string[]; pageSize?: number }): JSX.Element

Example

<LoadMoreList items={twentyThreeItems} pageSize={5} />
// shows 5 items + "Showing 5 of 23" + a Load More button
// click it ⇒ 10 items + "Showing 10 of 23"
// ...eventually⇒ 23 items, button gone, "Showing 23 of 23"

Constraints

• Use plain useState + array.slice — no external pagination library.
• Do not reorder items — always the same first-N-of-array semantics.