issue: useWatch / watch has wrong values when using form array with dnd kit

[alex-collibra]

Version Number

7.43.9

Codesandbox/Expo snack

Codesandbox reproduction

Steps to reproduce

1. Open provided codesandbox
2. See there are 2 field there: one has conditional field for grade
3. Drag the line with two fields to swap it with another one.
   There are two issues happening:
4. useWatch in GradeField returns undefined value for additionalInformation and renders the component, even though type === 'adult' and so that conditional field should be hidden completely.
5. useWatch in top lvl component shows unexpected values (grade property is now existing on both form rows, while it should only be existing for one row. The values in onSubmit are correct)

It seems like either useWatch runs earlier than expected or maybe there is a problem with keys (due to how drag overlay works)

Given that dnd kit react is widely used and they recommend using DragOverlay, it could be really helpful to have some examples / recommendations.

Thanks in advance 🙏

Expected behaviour

useWatch should show proper values.
useWatch should not return undefined for field which shouldn't even be rendered.

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

[bluebill1049]

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

[alex-collibra]

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
    ...
    )
}

[bluebill1049]

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

[BrendanC23]

@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;
}

[ap0nia]

I think adding a key to the DragOverlay actually works! It seemed like everything outside the overlay had the correct values but an erroneus FormRow continued to be rendered even after the activeId was reset.

<DragOverlay key={activeId}>
  {activeId ? (
    <FormRow {...getActiveChild()} isFromDragOverlay />
  ) : null}
</DragOverlay>

Based on the code here, the overlay is indeed memo-ized and potentially the root cause.

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.

In this instance, the previous active child continues to be rendered despite being moved. This lines up with your previous observation that the old values continue to persist there for some reason. It seems like this is likely due to dndkit and not react-hook-form.

See the updated sandbox here.