Skip to content

docs: bad recommendation in handleSubmit docs #1135

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
EthanMelamed opened this issue Apr 17, 2025 · 1 comment
Open

docs: bad recommendation in handleSubmit docs #1135

EthanMelamed opened this issue Apr 17, 2025 · 1 comment

Comments

@EthanMelamed
Copy link

I'm not sure if this is the right spot to put this issue about documentation. If not please direct me to where I can should provide this feedback.

Is your feature request related to a problem? Please describe.
The docs on this page: https://react-hook-form.com/docs/useform/handlesubmit have a bad recommendation:

handleSubmit function will not swallow errors that occurred inside your onSubmit callback, so we recommend you to try and catch inside async request and handle those errors gracefully for your customers.

const onSubmit = async () => {
  // async request which may result error
  try {
    // await fetch()
  } catch (e) {
    // handle your error
  }
}

return <form onSubmit={handleSubmit(onSubmit)} />

when errors are caught this way then you cannot make use of formState.isSubmitSuccessful because it will always be true when the onSubmit function does not throw an error

Describe the solution you'd like
I have found that letting the error bubble through the handleSubmit function and catching them on the otherside like onSubmit: {e => handleSubmit(onSubmit).catch((e) => {})} allows the isSubmitSuccessful property to be set correctly. I think the docs should be updated.

@den025
Copy link

den025 commented Apr 18, 2025

Hey @EthanMelamed, if you check video on the same page, you can see that both error handling strategies are addressed. try/catch inside onSubmit and the approach you provided in solution. I wouldn't call it bad recommendation, rather code example is not complete. In the video error handling looks like below

  const onSubmit = async (data) => {
    try {
      throw new Error("...");
    } catch (e) {
      setError("service", {
        type: "serverSideError",
        message: "something is wrong",
      });
    }
  };

which sets isSubmitSuccessful to false.

@bluebill1049 bluebill1049 transferred this issue from react-hook-form/react-hook-form Apr 21, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants