Clerk · Hook

useSignUp

useSignUp() gives a React component access to Clerk’s current SignUpFuture resource. Use its returned state and resource to inspect and manage a sign-up attempt, including custom flows.

How it works

Call useSignUp() in a React component to obtain the current SignUpFuture resource, its loading state, and errors from the latest fetch. The returned signUp object exposes the current attempt and methods for managing a custom sign-up flow.

Syntax

const { errors, fetchStatus, signUp } = useSignUp()

Returns

{ errors: SignUpErrors; fetchStatus: "idle" | "fetching"; signUp: SignUpFutureResource }

Key points

Use the hook to obtain the resource representing the current sign-up attempt.
The resource lets a component inspect how the active sign-up process is progressing.
Use the returned signUp resource to drive operations in a custom registration experience.
The errors field reports failures from the most recent fetch of the underlying resource.
fetchStatus exposes the resource loading state, with idle and fetching as its documented values.
The signUp return property is the SignUpFutureResource used by the component.

Common mistakes

Because signUp can change as the flow advances, include it in dependency arrays when using React memoization or effect hooks.
When an effect, callback, or memo depends on signUp, list it as a dependency rather than assuming its reference remains constant.

Example: Read sign-up state

import { useSignUp } from '@clerk/react'

export function SignUpStatus() {
  const { signUp, fetchStatus, errors } = useSignUp()

  return (
    <p>
      {fetchStatus === 'fetching'
        ? 'Loading sign-up…'
        : errors.length
          ? 'Sign-up error'
          : signUp.status}
    </p>
  )
}

Reads the current sign-up resource, fetch state, and errors from Clerk’s hook.

When to use it

Custom sign-up flow

Build a registration UI tailored to an application’s product and validation requirements.

Loading-state display

Show progress while Clerk retrieves or updates the current sign-up resource.

Error reporting

Present feedback when the latest sign-up resource fetch fails.

Interview questions

QWhat does useSignUp() provide?

useSignUp() returns access to the SignUpFuture object for the current sign-up attempt. Its return value includes signUp, fetchStatus, and errors.

Follow-up: Why should signUp be included in React dependency arrays? Its identity is not stable and may change as the sign-up flow progresses.

QHow can a component represent loading and fetch errors?

fetchStatus reports whether the underlying SignUpFuture is idle or fetching. errors contains problems from the last fetch of that resource.

Follow-up: How would you render a loading state? Check whether fetchStatus equals "fetching" before displaying the loaded sign-up state.

QWhen would you use this hook instead of only using prebuilt sign-up UI?

The hook is intended for checking the current sign-up attempt and managing the sign-up flow, including custom flows. The signUp resource is the object used for those operations.

Follow-up: When is a custom flow appropriate? Use it when the prebuilt sign-up components do not provide the required control or behavior.

SignUpFuture
SignUpFutureResource
SignUpErrors
useEffect
useCallback
useMemo

Source: useSignUp() | Clerk. Checked 2026-10-15.