# useWaitlist()

The `useWaitlist()` hook provides access to the [Waitlist](https://clerk.com/docs/tanstack-react-start/reference/types/waitlist.md) object, which provides methods and properties to manage waitlist entries in your application. This hook is useful for building a custom flow instead of using the prebuilt [<Waitlist />](https://clerk.com/docs/tanstack-react-start/reference/components/authentication/waitlist.md) component.

## Returns

| Name        | Type                 | Description                                                    |
| ----------- | -------------------- | -------------------------------------------------------------- |
| waitlist    | Waitlist             | The current active Waitlist instance, for use in custom flows. |
| errors      | Errors               | The errors that occurred during the last API request.          |
| fetchStatus | 'idle' | 'fetching' | The fetch status of the underlying Waitlist resource.          |

## Example

The following example demonstrates how to use the `useWaitlist()` hook to create a custom waitlist form. Users can submit their email address to join the waitlist, and the component displays appropriate feedback based on the submission state.

filename: app/routes/waitlist.tsx
```tsx
import { useWaitlist } from '@clerk/tanstack-react-start'
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/waitlist')({
  component: WaitlistPage,
})

export default function WaitlistPage() {
  const { waitlist, errors, fetchStatus } = useWaitlist()

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    const formData = new FormData(e.currentTarget)
    const emailAddress = formData.get('emailAddress') as string

    const { error } = await waitlist.join({ emailAddress })
    if (error) {
      console.error('Failed to join waitlist:', error)
    }
  }

  if (waitlist.id) {
    return (
      <div>
        <h1>Successfully joined the waitlist!</h1>
        <p>We'll notify you when you're approved.</p>
      </div>
    )
  }

  return (
    <div>
      <h1>Join the Waitlist</h1>
      <form onSubmit={handleSubmit}>
        <label htmlFor="email">Email address</label>
        <input id="email" name="emailAddress" type="email" required />
        {errors.fields.emailAddress && <p>{errors.fields.emailAddress.longMessage}</p>}
        <button type="submit" disabled={fetchStatus === 'fetching'}>
          {fetchStatus === 'fetching' ? 'Submitting...' : 'Join Waitlist'}
        </button>
      </form>
    </div>
  )
}
```

---

## Sitemap

[Overview of all docs pages](https://clerk.com/docs/llms.txt)