watch() vs useWatch()

[msageryd]

I'm really confused.
If I use watch I get rerenders evereytime.
If I use useWatch I get rerender only when the fieldValue changes.

useFormApi is my custom context which packs some functions from useForm along with some custom metadata.

The following is available in the context:

• watch
• control

Why does scenario 2 below rerender all the time?
The only reason I can come up with is that watch gets a new reference on every render. I tried to wrap watchin useCallback, but this broke the subscription completely.

In scenario 1, I'm using control from the same context. Why doesn't the usage of control trigger a rerender in the same way as watch

The simple solution is of course to use useWatch in this case. But the important questions are:

• What other functions from useForm will behave like watch and trigger rerenders?
• Whats the point with a subscription for a specific field if I'm getting rerenders even if the fieldValue hasn't changed?

Scenario 1:

  const {control} = useFormApi();
  const fieldValue = useWatch({name, control});

  return (
    <Text>
      [{++renderCount.current}] {fieldValue} ({name})
    </Text>
  );

Scenario 2:

  const {watch} = useFormApi();
  const fieldValue = watch(name);

  return (
    <Text>
      [{++renderCount.current}] {fieldValue} ({name})
    </Text>
  );

[bluebill1049]

1. watch will render the root level
2. useWatch will render at the hook/component level

[Moshyfawn]

What other functions from useForm will behave like watch and trigger rerenders?

Whenever you're subscribed to root level state like formState, form values (watch)
You can always consider hooks alternatives like useFormState, useWatch.

Whats the point with a subscription for a specific field if I'm getting rerenders even if the fieldValue hasn't changed?

You don't always want to wrap fields in a component to access some nested field's value at top form level.

Example CSB
You can switch on component render highlights in devtools for convenience

[bluebill1049]

@Moshyfawn thank you! much clearer with examples. would you like to put this into another comment? I will mark it as an answer.

[nvmnghia]

@bluebill1049 Then I would use useWatch() at <E />. I still can't think of any case where watch() is necessary.

[rygiewicz-samsung]

@bluebill1049 I have the same question(s). If useWatch() is "faster", why not use it everywhere and never use watch()? Is there a situation where watch() would work better than useWatch()?

[timkindberg]

@bluebill1049 It would be good to know why/when we'd want to use watch over useWatch. I just helped two teammates today and was trying to educate them with my best guess but it would be nice to have official guidance from you. Thanks!

[Moshyfawn]

What other functions from useForm will behave like watch and trigger rerenders?

Whenever you're subscribed to root level state like formState, form values (watch)
You can always consider hooks alternatives like useFormState, useWatch.

Whats the point with a subscription for a specific field if I'm getting rerenders even if the fieldValue hasn't changed?

You don't always want to wrap fields in a component to access some nested field's value at top form level.

Example CSB
You can switch on component render highlights in devtools for convenience

[msageryd]

@bluebill1049 @Moshyfawn
Thank you so much for putting up with my newbie questions. It's invaluable to get answers to this kind of questions from start instead of trying to figure it out along the road.

I've just about migrated my "form-engine" from Final-Form. I must say that you have done a great job with the DX. Mostly straight forward with very little "magic". I love it.

RHF pros:

• great DX
• performant
• active community
• speedy handling of open issues

I really hope that this is sustainable. It's great that you are more than one maintainer, that's a good sign. When I'm up and running I will for sure sign up for a monthly contribution.

edit:
Also, Bill, your short YouTube videos, are great. Even if I think I grasp most of the functions I need by now, there will always be some nuggets of knowledge when the author talks about a function.