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.

[bloodykheeng]

=================== ✅ useWatch vs watch in React Hook Form ============================
✅ useWatch (recommended in most cases):
Scope-aware: It only triggers re-renders inside the component where it's used.

Performance-friendly: Ideal for large forms where you only want to re-render specific components based on certain field changes.

⚠️ watch:
Triggers re-render of the whole component whenever any watched field changes.

Better for one-time reads (e.g., inside useEffect) but not for reactive rendering.

Not scoped, so it listens globally inside the form context.

🔁 Important Note About Using in useEffect
❗ Both watch and useWatch return new references every time.

So:
Avoid using them directly in useEffect dependencies Array (unless you unsubscribe).
Otherwise, it may cause unintended re-renders or infinite loops.

ie
✅ Correct pattern with manual subscription:

useEffect(() => {
  const subscription = watch((data) => {
    console.log(data);
  });

  return () => subscription.unsubscribe();
}, [watch]);

ie
✅ wrong pattern with manual subscription:

useEffect(() => {
  const subscription = watch((data) => {
    console.log(data);
  });

  return () => subscription.unsubscribe();
}, [watch]);

❌ Wrong Pattern (reactive dependencies cause infinite loop)

const attachments = useWatch({ name: 'attachments', control }); // ❌ creates a new reference every render

useEffect(() => {
  // This effect re-runs on every render because 'attachments' is a new array each time
  console.log('Merging attachments', attachments);

  const merged = [...attachments]; // some processing

  setValue('attachments', merged); // ❌ causes state update, which triggers re-render

}, [attachments]); // ❌ triggers infinite loop or excessive renders

✅ Correct pattern with useWatch:

const attachments = useWatch({ name: 'attachments', control });

useEffect(() => {
  // Do something
}, []); // Not using attachments directly as dependency

[timkindberg]

I don't think this is correct in all cases, like if attachments is a non-literal. But if the field you are watching is a literal, then equality is based on value not reference.

const attachments = useWatch({ name: 'attachments', control }); // ❌ creates a new reference every render

useEffect(() => {
// This effect re-runs on every render because 'attachments' is a new array each time
console.log('Merging attachments', attachments);

const merged = [...attachments]; // some processing

setValue('attachments', merged); // ❌ causes state update, which triggers re-render

}, [attachments]); // ❌ triggers infinite loop or excessive renders

So you could definitely do this if you had a regular input value, e.g.:

const firstName = useWatch({ name: 'firstName', control }); // ✅ creates a new literal every time but that's ok

useEffect(() => {
  ... do side effect
}, [firstName]); // ✅ triggers only when firstName value changes

[bloodykheeng]

Attachments is a json, array of objects putting it in useEffect dependacy array after watching it i was getting infinite rerenderes even if i try using useMemo i could get same result . So i had to look for other ways

[michael-harley]

useEffect(() => {
  const subscription = watch((data) => {
    console.log(data);
  });

  return () => subscription.unsubscribe();
}, [watch]);

For this code block, I still cannot understand why would you use watch, because when this is triggered, the whole Form will get re-rendered.

We can easily use getValues to achieve this, without triggering any additional render

// can be a use effect, or any functions
useEffect(() => {
  const values = getValues();

  // do something with the value
}, []);

My golden rule for react-hook-form would be:

1. Never use watch, as we always get unnecessary re-rendering. If you need to re-render because of a field value changes, then you should subscribe to the specific field using useWatch
2. Use getValues to get the value of a specific field, without triggering the re-rendering

[bloodykheeng]

Sometimes using useFieldArray is a better and safer approach, especially when you're dealing with arrays like attachments. useWatch returns a new reference on every render, so if you try to manage array merging or syncing inside a useEffect, you’ll usually run into unnecessary re-renders or even infinite loops.

useFieldArray handles all of this internally. It gives you stable references plus clean helpers like append, remove, and update, so you don’t have to manually merge arrays or call setValue.

Here’s a simple example of the recommended pattern:

const { control, register } = useForm();

const { fields, append, remove } = useFieldArray({
  control,
  name: "attachments",
});

return (
  <div>
    {fields.map((item, index) => (
      <div key={item.id}>
        <input
          type="file"
          {...register(`attachments.${index}.file`)}
        />
        <button type="button" onClick={() => remove(index)}>
          Remove
        </button>
      </div>
    ))}

    <button
      type="button"
      onClick={() => append({ file: null })}
    >
      Add Attachment
    </button>
  </div>
);