Return the output of onValid and onInvalid when handleSubmit returns

[petercpwong]

Currently there is no way to inspect the output of the onValid or onInvalid functions after it finishes running inside handleSubmit.

Saving the output of onValid and onInvalid and returning it after handleSubmit returns would be immensely helpful.

react-hook-form/src/logic/createFormControl.ts

Lines 1013 to 1067 in efd9195

	const handleSubmit: UseFormHandleSubmit<TFieldValues> =
	(onValid, onInvalid) => async (e) => {
	if (e) {
	e.preventDefault && e.preventDefault();
	e.persist && e.persist();
	}
	let hasNoPromiseError = true;
	let fieldValues: any = cloneObject(_formValues);
	_subjects.state.next({
	isSubmitting: true,
	});
	try {
	if (_options.resolver) {
	const { errors, values } = await _executeSchema();
	_formState.errors = errors as FieldErrors<TFieldValues>;
	fieldValues = values;
	} else {
	await executeBuildInValidation(_fields);
	}
	if (isEmptyObject(_formState.errors)) {
	_subjects.state.next({
	errors: {} as FieldErrors<TFieldValues>,
	isSubmitting: true,
	});
	await onValid(fieldValues, e);
	} else {
	if (onInvalid) {
	await onInvalid({ ..._formState.errors }, e);
	}
	_options.shouldFocusError &&
	focusFieldBy(
	_fields,
	(key) => get(_formState.errors, key),
	_names.mount,
	);
	}
	} catch (err) {
	hasNoPromiseError = false;
	throw err;
	} finally {
	_formState.isSubmitted = true;
	_subjects.state.next({
	isSubmitted: true,
	isSubmitting: false,
	isSubmitSuccessful:
	isEmptyObject(_formState.errors) && hasNoPromiseError,
	submitCount: _formState.submitCount + 1,
	errors: _formState.errors,
	});
	}
	};

One use case may be for another downstream hook to determine the next steps based on the output of onValid (eg. a Modal window hook that returns server data from onValid after it closes). Anything downstream running the function returned by handleSubmit is unable to inspect the output of onValid since whatever it returns gets swallowed.

Example use case:

function useModal({ onSubmit }) {
  const submitModal = useCallback(() => {
    // No way to inspect what was returned by handleSubmit
    const result = await onSubmit();
    
    if (result.foo) {
      // Do something interesting
    }
  }, [onSubmit]);

  return {
    submitModal
  }
}


/* Inside some component */

const { handleSubmit } = useForm();

const submit = handleSubmit(async () => {
  const result = await someHttpRequest();
  // This gets swallowed
  return result;
});

useModal({ onSubmit: submit });

[bluebill1049]

Did you see my proposal on the oringal feature reques? Let me know what do you think?

[petercpwong]

Yes the proposed changes in the other thread look good. Much better than what I'd originally proposed.

[petercpwong]

@bluebill1049 Can we revisit this PR again? The other feature request veered off into a different use case from the one this PR attempts to solve. This PR allows the user to (optionally) "peek" into the return value of handleSubmit while the other recent feature allows the user to emit global errors.

[bluebill1049]

hey, @petercpwong I am working on the new Form component, what if we include values in the onScucess callback?

<Form
  onSuccess={({ data }) => {
    console.log(data)
  }}
/>
``

[petercpwong]

My use case requires being able to get the return value from the function created by handleSubmit.

Also looks like other people have a similar use case:
#6817 (comment)

It's a very small non-breaking change that would help me (and possibly many others) tremendously.

[bluebill1049]

I see, sure let me revisit this once Form component is stable for a beta release.

[cb-eli]

It will be helpful on my side as well. Currently, I'm using refs as a dirty workaround.