useWatch for field relations

[correiarmjoao]

Hello,

Thank you for this awesome library, I have been using it for a two weeks trying to build a form component based on a list of fields. Basically it's a form that gets a list of fields, resolves them to a structure and uses a specific component to render them inside the form.

Everything has been working well however I got stuck while trying to manage field relations.
I was able to connect fields using useWatch hook, but I'm still facing a few problems when the relation does not exist and when the form has data.

You can find a simplified version in this sandbox.

The first issue happens when a field does not have a relation, since useWatch can not be run conditionally they only way I was able to use it was by using a field name that does not exist on the form.

const parentValue = useWatch({
    control,
    name: parent ? parent : "__NOT_A_FIELD__"
  });

Is this the only way to do it? It seems more like a hack and I'm not sure if I missed something.

The second problem i have happens when i'm trying to look for a change on the parent, based on the docs there is no option to use a callback for useWatch, so the only way to i found to run a function was using a useEffect with parentValue as a dependency.

useEffect(() => {
    handleParentChange(parentValue, props, formContext, {
      setOptions,
      fetchedOptions
    });
  }, [parentValue, props, formContext, fetchedOptions]);

This works when the form is empty, because it just resets the child fields, the problem is that when we have data in the form and it rendering for the first time the handleParentChange also runs and resets the child fields.

Can this be done in another differently?

[Kalgros20]

Having the same problem here, i cannot use useWatch to monitor just some fields... @correiarmjoao do you find a way to do-it ? In my opinion, useWatch should receive a nullable or an empty array in those cases...

[drianoaz]

@Kalgros20 I think that it will work to solve this problem.