LiveKit docs › Hooks › usePagination

---

# usePagination

> ℹ️ **Note**
> 
> This feature is experimental and may change or be removed based on developer feedback and real-world usage.

The `usePagination` hook implements simple pagination logic for use with arrays.

## Import

```typescript
import { usePagination } from "@livekit/components-react";

```

## Usage

```tsx
const tracks = useTracks();
const pagination = usePagination(4, tracks);

<TrackLoop tracks={pagination.tracks} />;

```

## Properties

- **`itemPerPage`** _(number)_: 

- **`trackReferences`** _(TrackReferenceOrPlaceholder[])_: 

## Returns

```typescript
{
    totalPageCount: number;
    nextPage: () => void;
    prevPage: () => void;
    setPage: (num: number) => void;
    firstItemIndex: number;
    lastItemIndex: number;
    tracks: TrackReferenceOrPlaceholder[];
    currentPage: number;
}

```

---

This document was rendered at 2026-06-07T11:32:58.513Z.
For the latest version of this document, see [https://docs.livekit.io/reference/components/react/hook/usepagination.md](https://docs.livekit.io/reference/components/react/hook/usepagination.md).

To explore all LiveKit documentation, see [llms.txt](https://docs.livekit.io/llms.txt).