🧮 feat: compute prop for useWatch subscription

[bluebill1049]

close #12501

• subscribe to the entire form but only return updated value with certain condition

type FormValue = {
  test: string;
}

const watchedValue = useWatch({
  control: methods.control,
  compute: (data: FormValue) => {
    if (data.test?.length) {
      return data.test;
    }

    return '';
  },
});

• subscribe to a specific form value state

type FormValue = {
  test: string;
}

const watchedValue = useWatch({
  control: methods.control,
  name: 'test',
  compute: (data: string) => {
      return data.length ? data : '';
  },
});

[github-actions]

Size Change: +288 B (+0.52%)

Total Size: 55.2 kB

Filename	Size	Change
dist/index.cjs.js	11 kB	+76 B (+0.7%)
dist/index.esm.mjs	20.3 kB	+139 B (+0.69%)
dist/index.umd.js	11.1 kB	+73 B (+0.66%)

ℹ️ View Unchanged

Filename	Size
dist/react-server.esm.mjs	12.8 kB

_{compressed-size-action}

[BrendanC23]

Do you think there's value in including a name prop? This would ensure that the compute() function isn't running on every change to the form value. For example, from #12501

const displayNicknameField = useWatch({ name: 'userName', compute: currentValue => currentValue.length > 10 });

The compute function only needs to run if userName changes. It's not a big deal here because it's only doing a simple comparison, but if compute slow, it would help to run it only when necessary.

Another option would be some kind of computeDeps, which would work like useMemo/useCallback. This would be useful if there are multiple name values that should trigger the re-computation.

[bluebill1049]

Do you think there's value in including a name prop? This would ensure that the compute() function isn't running on every change to the form value. For example, from #12501

yea, can looking into that.

[kotarella1110]

This line is no longer necessary since #12771 has been merged!

[bluebill1049]

oh nice, i will remove it.

[bluebill1049]

Going to get an rc version out this weekend. It should be a good feature for all.