issue: Async Default Values Not Loaded When Promise Resolves Immediately/Quickly

[PacoHuerta]

Version Number

7.43.8

Codesandbox/Expo snack

https://codesandbox.io/s/useformstate-forked-21tel9?file=/src/App.js

Steps to reproduce

The error described in the issue title is apparent as soon as Code Sandbox loads. Upon loading the sandbox, it is apparent that the input field does not have the expected default value, and the value will never load automatically.

If setTimeout's timeout value is increased from 0 to 500 (or any other value higher than 0), then the form behaves as described in the "Expected Behavior" section.

This is an issue when using libraries that cache responses and thus immediately resolve the promises they return.

Note that, if one clicks the toggle button on the page twice (unmount and remount occurs), then "mark" shows up on the field.

The problem is with this code snippet, which is found within creatFormControl.js:

if (isFunction(_options.defaultValues)) {
    _options.defaultValues().then((values) => {
      reset(values, _options.resetOptions);
      _subjects.state.next({
        isLoading: false,
      });
    });
  }

createFormControl is invoked from within the useForm hook; however, createFormControl is invoked from the main body of useForm instead of being invoked from within an effect (useEffect). Since createFormControl causes side effects, it should be invoked from within an effect.

After cloning this repository, commenting out the above code snippet within createFormControl and recreating that snippet within useEffect inside the body of useForm, the issue was resolved.

Expected behaviour

Value "mark" should be present in input field without any manual action after form fully loads.

What browsers are you seeing the problem on?

No response

Relevant log output

No response

Code of Conduct

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

[bluebill1049]

Would you like to send us a PR on this issue?

[langovoi]

I faced with the same problem today

[langovoi]

Since createFormControl causes side effects, it should be invoked from within an effect.

if createFormControl is invoked after render (because of useEffect), useForm initiate new render of parent component. So I am not sure it is right change.

Maybe replace of useSubscribe with React.useSyncExternalStore fix this problem, because it get value at render time also.

react-hook-form/src/useForm.ts

Lines 84 to 100 in 8c76ad3

	useSubscribe({
	subject: control._subjects.state,
	next: (
	value: Partial<FormState<TFieldValues>> & { name?: InternalFieldName },
	) => {
	if (
	shouldRenderFormState(
	value,
	control._proxyFormState,
	control._updateFormState,
	true,
	)
	) {
	updateFormState({ ...control._formState });
	}
	},
	});