issue: formState.isLoading always returns true

[crashtech]

Version Number

7.43.1

Codesandbox/Expo snack

https://codesandbox.io/s/nice-gould-tzmvfo?file=/src/App.js

Steps to reproduce

1. Just load the page
2. Using FormProvider makes isLoading always return true
3. Even trying to override using <FormProvider {...hook} formState={{ ...hook.formState, isLoading: false }}> doesn't work

Expected behaviour

The default value for isLoading should be false, especially if defaultValues hasn't been provided, or if it hasn't been assigned to a Promise.

What browsers are you seeing the problem on?

Chrome

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[Moshyfawn]

Your sandbox link contains the default RHF template; no reproduction. Please update your sandbox with the reproduction code

[crashtech]

Done!

[Moshyfawn]

I'm a bit rusty with how the change to the formState due to the new async defaultvalues, but there's something going with how the default isLoading: true and it's never handled if defaultValues are not async.

@bluebill1049, I might need your help on this one 🤗

[bluebill1049]

thanks @Moshyfawn i will look into this one.

[bluebill1049]

@crashtech If you are not using async defaultValues, what's the use case for subscribing to isLoading?

[Moshyfawn]

@crashtech If you are not using async defaultValues, what's the use case for subscribing to isLoading?

That's a good question, actually. I guess, it feels like isSubmitting?

[bluebill1049]

Yea, if you are providing static defaultValues, then you don't need isLoading, and we can save the extra byte in the lib to skip the logic check.

[crashtech]

I'm connecting react hook forms with Semantic UI, so I'm forwarding this prop to the UI component. It should be consistent, regardless of using asynchronous default values.

Plus, a form here doesn't have default values, but select options are loaded asynchronously.

[Moshyfawn]

Plus, a form here doesn't have default values, but select options are loaded asynchronously.

Select options loading doesn't have anything to do with isLoading unless it's a part of defaultValues

[crashtech]

Well, I assume "the form is loading if it can't be used yet". But regardless the reason, it should be undefined, or false at least.

The state is wrong, regardless of the motivation about using it.

The idea is to use the state to disable inputs while options are still loading.

[bluebill1049]

I think this argument is going in a loop, the point is you don't need isLoading in the first place, whether we return the correct state for your UI or not is our responsibility. Yes, we can fix that, but you shouldn't use that in the first place. So I would suggest fixing your app logic first, while we patch this later on.

[bluebill1049]

The idea is to use the state to disable inputs while options are still loading.

But you are not using async defaultValues, so the loading is not the valid usecase.

[crashtech]

So you should mention that is loading is a exclusive prop when using async default values. Or even rename it to make it clear that is not the form that is loading, is just the default values.

In order to add an external support to that, I would have to add an exclusive provider just so it can be captured down the tree.

Not even the override on the FormProvider works.

[bluebill1049]

react-hook-form/documentation@132a5ec