`useStatements()`

Warning

This API is experimental and subject to change while Clerk Billing is under Beta. To mitigate potential disruptions, we recommend pinning your SDK and clerk-js package versions.

The useStatements() hook provides access to the statements associated with a user or organization. It returns a paginated list of statements and includes methods for managing them.

Parameters

useStatements() accepts a single object with the following properties:

Name
for?
Type
'user' | 'organization'
Description
Specifies whether to fetch statements for the current user or organization. Defaults to 'user'.
Name
pageSize?
Type
number
Description
The number of statements to fetch per page. Defaults to 10.
Name
initialPage?
Type
number
Description
The page number to start fetching from. Defaults to 1.
Name
infinite?
Type
boolean
Description
When true, enables infinite pagination mode where new pages are appended to existing data. When false, each page replaces the previous data. Defaults to false.
Name
keepPreviousData?
Type
boolean
Description
When true, the previous data will be kept while loading the next page. This helps prevent layout shifts. Defaults to false.

Returns

useStatements() returns an object with the following properties:

Name
data
Type
[] | null
Description
An array of statements, or null if the data hasn't been loaded yet.
Name
isLoading
Type
boolean
Description
A boolean that is true if there is an ongoing request and there is no fetched data.
Name
isFetching
Type
boolean
Description
A boolean that is true if there is an ongoing request or a revalidation.
Name
hasNextPage
Type
boolean
Description
A boolean that indicates if there are available pages to be fetched.
Name
hasPreviousPage
Type
boolean
Description
A boolean that indicates if there are available pages to be fetched.
Name
fetchNext
Type
() => void
Description
A function that triggers the next page to be loaded. This is the same as fetchPage(page => Math.min(pageCount, page + 1)).
Name
fetchPrevious
Type
() => void
Description
A function that triggers the previous page to be loaded. This is the same as fetchPage(page => Math.max(0, page - 1)).
Name
pageCount
Type
number
Description
The total amount of pages. It is calculated based on count, initialPage, and pageSize.
Name
count
Type
number
Description
The total number of statements available.
Name
error
Type
| null
Description
Returns an error object if any part of the process fails.
Name
fetchPage
Type
(page: number) => void
Description
A function that triggers a specific page to be loaded.
Name
isError
Type
boolean
Description
A boolean that indicates the request failed.
Name
page
Type
number
Description
The current page.
Name
revalidate
Type
() => Promise<void>
Description
A function that triggers a revalidation of the current page.
Name
setData
Type
(data: any[]) => void
Description
A function that allows you to set the data manually.

Examples

Basic usage

The following example demonstrates how to fetch and display a user's statements.

import { useStatements } from '@clerk/nextjs/experimental'

function StatementsList() {
  const { data, isLoading } = useStatements({
    for: 'user',
    pageSize: 10,
  })

  if (isLoading) {
    return <div>Loading statements...</div>
  }

  if (!data || data.length === 0) {
    return <div>No statements found.</div>
  }

  return (
    <ul>
      {data?.map((statement) => (
        <li key={statement.id}>
          Statement ID: {statement.id} - {statement.status}
          <br />
          Date: {statement.timestamp.toLocaleDateString()}
        </li>
      ))}
    </ul>
  )
}

Infinite pagination

The following example demonstrates how to implement infinite scrolling with statements.

import { useStatements } from '@clerk/nextjs/experimental'

function InfiniteStatements() {
  const { data, isLoading, hasNextPage, fetchNext } = useStatements({
    for: 'user',
    infinite: true,
    pageSize: 20,
  })

  if (isLoading) {
    return <div>Loading...</div>
  }

  if (!data || data.length === 0) {
    return <div>No statements found.</div>
  }

  return (
    <div>
      <ul>
        {data?.map((statement) => (
          <li key={statement.id}>
            Statement ID: {statement.id}
            <br />
            Amount: {statement.totals.grandTotal.amountFormatted}
            <br />
            Status: {statement.status}
          </li>
        ))}
      </ul>

      {hasNextPage && <button onClick={() => fetchNext()}>Load more statements</button>}
    </div>
  )
}

Edit this page on GitHub

Last updated on Aug 19, 2025

useStatements()