issue: error when using useWatch with a name array and default values as object

[adesurirey]

Version Number

v7.40.0

Codesandbox/Expo snack

https://stackblitz.com/edit/react-ts-beok4h?file=App.tsx

Steps to reproduce

1. Modify the TS doc example for useWatch so it uses an array as name, as mentioned in the comment next to it
2. Update defaultValues to an object following TS directives

function FirstNameWatched({ control }: { control: Control<FormInputs> }) {
  const [firstName, lastName] = useWatch({
    control,
    name: ['firstName', 'lastName'],
    defaultValue: { firstName: 'default', lastName: 'default' },
  });

  return (
    <p>
      Watch: {firstName} {lastName}
    </p>
  );
}

3. See the runtime error

object is not iterable (cannot read property Symbol(Symbol.iterator))

No errors when passing an array as defaultValues but then it generates other TS errors.

Expected behaviour

Should not crash, or type should be updated

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]

thanks a lot will try to get it fixed today.

[bluebill1049]

This is actually not a bug, the return type of the useWatch is actually array instead of object.

function FirstNameWatched({ control }: { control: Control<FormValues> }) {
  const [a,b] = useWatch({
    control,
    name: ['firstName', 'lastName'],
    defaultValue: { firstName: '', lastName: ''},
  });

  return (
    <p>
      Watch: {a} {b}
    </p>
  );
}

[adesurirey]

So it's a typing error?

[bluebill1049]

I tested it on my end and it's fine (the screenshot above).

[adesurirey]

Yes the type is fine but it produces a runtime error as reproduced here: https://stackblitz.com/edit/react-ts-beok4h?file=App.tsx

[neerajkrbansal1996]

seems like a bug to me, once you will confirm that it is a bug please let me know if I can take this issue! @bluebill1049

[bluebill1049]

So it's a typing error?

Oops, my bad i was focus on the type...

[bluebill1049]

seems like a bug to me, once you will confirm that it is a bug please let me know if I can take this issue! @bluebill1049

Yes, please. Let me know if you need some assit.

[neerajkrbansal1996]

thanks, @bluebill1049, Can you please assign this to me on Github, just to be sure that no one else starts working on the same?

[bluebill1049]

Thank you very much for the help @neerajkrbansal1996 in advance.

[adesurirey]

@bluebill1049 @neerajkrbansal1996 From my understanding it comes form this:

react-hook-form/src/useWatch.ts

Lines 183 to 187 in c21210b

	const [value, updateValue] = React.useState<unknown>(
	isUndefined(defaultValue)
	? control._getWatch(name as InternalFieldName)
	: defaultValue,
	);

When defaultValue is an object it is set as value and returned without any transformation. So then when deconstructing the result as if it was an array, the error is thrown.

I think it should be something like this:

const [value, updateValue] = React.useState<unknown>(
    isUndefined(defaultValue)
      ? control._getWatch(name as InternalFieldName)
-     : defaultValue,
+     : control._getWatch(name as InternalFieldName, defaultValue)
  );

Let me know if that helps and if I can do more to close this.

[bluebill1049]

thanks a lot, @adesurirey that's correct!

[bluebill1049]

thanks, @neerajkrbansal1996 for the willingness to fix the issue, if you are interested I can ping you with other issues in the near future thanks a lot @adesurirey for the report and also fixing the issue.

[neerajkrbansal1996]

thanks @bluebill1049 , let me know if can be of some help with other issues!