Built-in React DOM Hooks

The react-dom package contains Hooks that are only supported for web applications (which run in the browser DOM environment). These Hooks are not supported in non-browser environments like iOS, Android, or Windows applications. If you are looking for Hooks that are supported in web browsers and other environments see the React Hooks page. This page lists all the Hooks in the react-dom package.

Form Hooks

Canary

Form Hooks are currently only available in React’s canary and experimental channels. Learn more about React’s release channels here.

Forms let you create interactive controls for submitting information. To manage forms in your components, use one of these Hooks:

useFormStatus allows you to make updates to the UI based on the status of the a form.

function Form({ action }) {
  async function increment(n) {
    return n + 1;
  }
  const [count, incrementFormAction] = useActionState(increment, 0);
  return (
    <form action={action}>
      <button formAction={incrementFormAction}>Count: {count}</button>
      <Button />
    </form>
  );
}

function Button() {
  const { pending } = useFormStatus();
  return (
    <button disabled={pending} type="submit">
      Submit
    </button>
  );
}

NextuseFormStatus

Form Hooks

Canary

Form Hooks are currently only available in React’s canary and experimental channels. Learn more about React’s release channels here.

Forms let you create interactive controls for submitting information. To manage forms in your components, use one of these Hooks:

useFormStatus allows you to make updates to the UI based on the status of the a form.

function Form({ action }) {
  async function increment(n) {
    return n + 1;
  }
  const [count, incrementFormAction] = useActionState(increment, 0);
  return (
    <form action={action}>
      <button formAction={incrementFormAction}>Count: {count}</button>
      <Button />
    </form>
  );
}

function Button() {
  const { pending } = useFormStatus();
  return (
    <button disabled={pending} type="submit">
      Submit
    </button>
  );
}

function Form({ action }) { async function increment(n) { return n + 1; } const [count, incrementFormAction] = useActionState(increment, 0); return ( <form action={action}> <button formAction={incrementFormAction}>Count: {count}</button> <Button /> </form> ); } function Button() { const { pending } = useFormStatus(); return ( <button disabled={pending} type="submit"> Submit </button> ); }

Built-in React DOM Hooks

Form Hooks

Canary

react@19.2

react-dom@19.2

React Compiler

React DevTools

eslint-plugin-react-hooks

Rules of React

React Server Components

Legacy APIs

Built-in React DOM Hooks

Form Hooks

Canary