How to Disable Form Fields While Waiting for Login Response in React (isSubmitting in RHF? )?

[fnunez306]

Hi everyone,

I'm working on a React app and need to disable the form fields during the login process to prevent users from submitting multiple requests or interacting with the form while waiting for the server response.

Here's the situation:

I have a login form with email, password fields, and a submit button.

When the user clicks "Login," I want to disable all fields and the button until I get a response from the server.

I'm considering two approaches to achieve this:

Using isSubmitting: Disable fields while the form is being submitted.

Using a loading state (isLoading): Disable fields while waiting for the server response after making the request.

Which approach is better for this scenario?

Should I use isSubmitting from React Hook Form (RHF), or is it more appropriate to manage a loading state (isLoading) myself?

Does anyone have experience with this and can share the approach they use?

I’d appreciate any advice or examples on how to handle this effectively. Thanks in advance!