A ReactDOM hook that allows you to reset form optionally after submitting

README.md

Example:

function Form() {
  const [isPending, onSubmit] = useFormActionHandler((formData, reset) => {
    if (formData.get('condition') === 'X') {
      reset();
    }
    // ...
  });
  
  return (
    <form onSubmit={onSubmit}>
      {...}
    </form>
  );
}

useFormAction.ts

import { FormEvent, useTransition } from "react";
import { requestFormReset } from "react-dom";

// ref: https://github.com/facebook/react/issues/29034#issuecomment-2143595195
// default <form action={...} /> reset the whole form on submit
// this hook allows to reset the form conditionally

export function useFormActionHandler(
  action: (formData: FormData, reset: () => void) => Promise<void>,
) {
  const [isPending, startTransition] = useTransition();

  function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const formData = new FormData(event.currentTarget);
    const reset = () => {
      requestFormReset(event.currentTarget);
    };
    startTransition(async () => {
      await action(formData, reset);
    });
  }

  return [isPending, handleSubmit] as const;
}