issue: useWatch / watch has wrong values when using form array with dnd kit about react-hook-form HOT 4 OPEN

Pretty sure it's related to this:

useWatch's execution order matters, which means if you update a form value before the subscription is in place, then the value updated will be ignored.

https://react-hook-form.com/docs/usewatch

from react-hook-form.

I see. Using useFormValues hook as suggested in the docs and getting type from useFormValues return value instead of accessing it using field kind of works.
The problem is that old values still shows up for a moment, where they shouldn't.

Before:

const useFormValues = () => {
  const { getValues } = useFormContext()

  return {
    ...useWatch(), // subscribe to form value updates

    ...getValues(), // always merge with latest form values
  }
}

// FormRow component

const FormRow = ({ index, field, isFromDragOverlay }) => {

  return (
      ...
      {field.type === 'student' && (
        <GradeField index={index} isFromDragOverlay={isFromDragOverlay} />
      )}
      ...
  )
}

After:

const FormRow = ({ index }) => {
  const values = useFormValues()
  const type = values.people[index].type

  return (
    ...
    {type === 'student' && <GradeField index={index} />} // <--- no need to pass isFromDragOverlay now or disable watch if field is from drag overlay - it will just work now
    ...
    )
}

from react-hook-form.

This PR may address this sort of issue #11522 as subscription can be established before react component.

from react-hook-form.

@bluebill1049 Can you explain how useFormValues() works? Is this accurate?

• useWatch() will re-trigger at the hook level (instead of the useForm() root level like watch()), but it doesn't always have the most up-to-date value because the update might happen before the subscription
• getValues() will have the up-to-date values

Why does useFormValues() return { ...useWatch(), ...getValues() }? Why not just call useWatch() to ensure that the function runs when the subscription changes, and then return getValues() to get the latest values?

Is there any issues with doing something like this instead?

export function useWatchFormValues<
    TFieldValues extends FieldValues = FieldValues,
    TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
>(form: UseFormReturn<TFieldValues>, name: TFieldName) {
    useWatch({ control: form.control, exact: true, name: name }); // subscribe to form value updates
    const values = form.getValues(name);

    return values;
}

from react-hook-form.