Заметки про React: “Создание переиспользуемой SubmitButton В React 19 появился хук useForm…”

Создание переиспользуемой SubmitButton

В React 19 появился хук useFormStatus для получения статуса формы. С его помощью можно создать переиспользуемую кнопку действия, которая будет сама переходить в состояние прогресса и дизейблиться. Пример компонента кнопки:


export default function SubmitButton({
  children,
  loading,
  disabled,
  ...otherProps
}: Props & React.HTMLProps<HTMLButtonElement>) {
  const { pending } = useFormStatus();
  const isSubmitting = pending || loading;

  return (
    <Button
      {...otherProps}
      disabled={isSubmitting || disabled}
      type="submit"
    >
      {isSubmitting ? (
         // progress
      ) : (
        children
      )}
    </Button>
  );
}

В своей статье автор привел пример использования этой кнопки в React 19 с серверными функциями. Такой пример будет работать, даже когда JavaScript выключен или когда кнопка еще не гидратировала:


export default function Component({ contactId }: { contactId: string }) {
  return (
    <form action={deleteRecord}>
      <input type="hidden" name="contactId" value={contactId} />
      <SubmitButton>Delete</SubmitButton>
    </form>
  );
}

https://aurorascharff.no/posts/creating-a-reusable-submitbutton-with-useformstatus