Skip to content

improve useWatch type when compute prop is specified#12771

Merged
bluebill1049 merged 1 commit into
close-feature-request-12501from
feat/improve-ts-useWatch-compute-prop
Apr 24, 2025
Merged

improve useWatch type when compute prop is specified#12771
bluebill1049 merged 1 commit into
close-feature-request-12501from
feat/improve-ts-useWatch-compute-prop

Conversation

@kotarella1110

Copy link
Copy Markdown
Member

Overview:

  • Introduced function overloads to useWatch to provide more precise typings based on the presence and type of the name prop.
  • Enabled conditional typing of the compute function and useWatch's return type depending on how name is specified.
  • Enabled better inference of return types based on name prop variations via function overloads.

@github-actions

Copy link
Copy Markdown
Contributor

Size Change: 0 B

Total Size: 54.6 kB

ℹ️ View Unchanged
Filename Size
dist/index.cjs.js 10.8 kB
dist/index.esm.mjs 20.2 kB
dist/index.umd.js 10.9 kB
dist/react-server.esm.mjs 12.7 kB

compressed-size-action

Comment thread src/types/form.ts
control?: Control<TFieldValues>;
exact?: boolean;
compute?: <T>(formValues: T) => T;
compute?: (formValues: any) => any;

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Curious about the reason why this has to go with any?

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@bluebill1049

Using <T>(formValues: T) => T as the type for the compute function causes incompatibility with the following overloads:

https://github.com/react-hook-form/react-hook-form/pull/12771/files#diff-ff419364ba61880799eb26586378725c10c0b87e2ed7b9954cafafd30d256805R208-R223

Also, since the return type of the compute function doesn’t always match the type of its argument, I believe <T>(formValues: T) => T is not accurate.

That’s why I changed it to any.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

aha i see thanks 🙏

@bluebill1049 bluebill1049 requested a review from Copilot April 23, 2025 12:19

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR refines the type definitions of the useWatch hook when a compute prop is provided, enabling more precise conditional typing.

  • Updated overload signatures and JSDoc examples in src/useWatch.ts
  • Modified type definitions in src/types/form.ts
  • Added tests in src/tests/type.test.tsx and updated API extractor documentation in reports/api-extractor.md.api.md

Reviewed Changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated no comments.

File Description
src/useWatch.ts Improved function overloads and updated JSDoc examples.
src/types/form.ts Adjusted the compute prop type signature to be less generic.
src/tests/type.test.tsx Added tests to validate correct compute function type behavior.
reports/api-extractor.md.api.md Updated API documentation to reflect the new overloads.
Comments suppressed due to low confidence (1)

src/useWatch.ts:203

  • In the JSDoc example for the array overload, the destructured parameters are named fieldAValue and fieldBValue, but the example body uses fieldA and fieldB. Consider updating the variable names in the example for clarity.
return fieldB === 2 ? fieldA : null,

@bluebill1049 bluebill1049 merged commit bcf3cd1 into close-feature-request-12501 Apr 24, 2025
@bluebill1049 bluebill1049 deleted the feat/improve-ts-useWatch-compute-prop branch April 24, 2025 01:34
@bluebill1049

Copy link
Copy Markdown
Member

thanks a lot @kotarella1110 🙏

bluebill1049 added a commit that referenced this pull request Jul 5, 2025
* feat: compute prop for useWatch subscription

* clean up initialValue

* update api

* update with unit test

* 👁️ feat: improve reference update with useWatch (#12537)

* feat: improve reference update with useWatch

* update pai extrator

* Revert "update pai extrator"

This reverts commit 0b3bbd3.

* Revert "feat: improve reference update with useWatch"

This reverts commit a664a68.

* update form value reference at consumer isntead usewatch

* update api extrator

* 🐞 fix #12532 useController should unregister issue with strict mode (#12538)

* 7.55.0-next.3

* ⏰ chore: remove __typetest__ folder from build (#12555)

* 🐞 fix useController should unregister issue with strict mode

* chore: remove __typetest__ folder from build

* 🏈 chore: upgrade app and automation deps (#12556)

* chore: upgrade app and automation deps

* update app lock

* revert app package

* 🦾 feat: reference stable for useWatch defaultValue (#12564)

* feat: reference stable for useWatch defaultValue

* remove as

* 🐞 fix #12572 disabled field value not get undefined in resolver (#12573)

* 🐞 fix #12572 disabled field value not get undefined in resolver

* fix resolver data issue

* 7.55.0-next.4

* ❤️ update readme footer for Vercel documentation sponsorship

* 📜 update README.md move banner to the bottom (#12604)

* 😌 close #12606 update package.json author field (#12608)

* 🐞 fix #12580 valid state update with onBlur mode (#12612)

* 🐞 fix #12580 valid state update with onBlur mode

* update e2e

* 🛟 fix: add condition to prevent infinite render (#12622)

* fix: add condition to prevent infinite render

* fix: revert pnpm-lock.yaml changes, and use a utility function instead of typing code manually

* Revert "fix: revert pnpm-lock.yaml changes, and use a utility function instead of typing code manually"

This reverts commit b86e660.

* Revert "fix: add condition to prevent infinite render."

This reverts commit 51105a6.

* fix: use a utility function instead of typing code manually

* 7.55.0-next.5

* 🐞 fix #12580 `setError` in `useEffect` does not work when used inside the `FormProvider` context (#12642)

* 🐞 fix #12632 use useLayoutEffect instead of useEffect to subscribe components earlier than before

* 🧪 test(useFieldArray): Update the result array to reflect the outcomes of the modified logic

* 🧪 test(setError): “Add a test case for using setError within the useEffect callback in FormProvider as mentioned in the issue

* 🦥 close #12634 allow components with `useController` hook be memoized (#12635)

* add test scenario for #12634

* fix(useForm): set `values` immediately on first render

* 🐞 fix #12631 revalidateMode issue with useFieldArray validation (#12646)

* 🚠 upgrade deps and ts to 5.8.0 (#12647)

* upgrade deps and ts to 5.8.0

* app deps upgrade

* update prettier

* Revert "app deps upgrade"

This reverts commit aaabc46.

* update pnpm lock

* 🫡 allow use of `handleSubmit` with native events (#12645)

* Allow use of handleSubmit with native events

* Run API Extractor

---------

Co-authored-by: Beier (Bill) <bluebill1049@hotmail.com>

* 7.55.0-next.6

* 🐞 fix #12665 regression on values over take default values

* 7.55.0-next.7

* 🥹 close #12665 issue with values not populate form

* 🐞 fix(useForm): make `values` and `defaultValues` work correctly with `createFormControl` and `useMemo` (#12675)

* Revert "🐞 fix #12665 regression on values over take default values"

This reverts commit ef80ff6.

* Revert "🥹 close #12665 issue with values not populate form"

This reverts commit d9e7e4d.

* test: add test case for #12665

* fix(vscode): fix running individual tests and debugging

* test: verify setting values doesn't unregister fields

* fix(createFormControl): don't unregister fields on reset

* fix(useForm): set default values if given along with a form control

Fixes #12665 .

* 👮‍♂️ feat: infer resolver output types (#12638)

* Allow resolver output type to truly differ (#11951)

* Default TTransformedValues to TFieldValues without constraint

This allows for resolvers to parse to a different type that doesn't have to have
the same shape as TFieldValues.

This commit contains type-only changes. No runtime changes are introduced.

* Tests for TTransformedValues change

Test that `useWatch` returns `TFieldValues` values, not `TTransformedValues`
ones.

Test that `TTransformedValues` are submitted on success and `TFieldValues` on
failure.

* Add type test for useForm inference

From: https://github.com/react-hook-form/react-hook-form/pull/11913/files

---------

Co-authored-by: Beier (Bill) <bluebill1049@hotmail.com>

* feat: add automatic output type inference from resolver functions

* fix: resolvers type inference

* chore: api extractor

* test build

* Revert "test build"

This reverts commit 16e5661.

---------

Co-authored-by: Jeremy Hughes <jedahu@gmail.com>
Co-authored-by: Beier (Bill) <bluebill1049@hotmail.com>

* 7.55.0-next.8

* ⚽️ chore: update prettier configuration and apply formatting (#12650)

Co-authored-by: Beier (Bill) <bluebill1049@hotmail.com>

* 🪲 fix #12680: Update Fieldarray Unmount Status (#12690)

* 🫡 fix: improve type inference for `useFormContext` (#12689)

Co-authored-by: Beier (Bill) <bluebill1049@hotmail.com>

* 7.55.0-next.9

* 7.55.0

* 🐞 fix: use `useIsomorphicLayoutEffect` to address warning in SSR (#12738)

* ⏰ feat: introduce `isReady` state for subscription (#12568)

* faet: introduce ready state for subscription

* revert change

* save code

* save code

* code consistency

* change to part of formState

* update all unit tests

* update api contract

* update e2e

* fix two more

* update more e2e tests

* remove two blur counter

* fix issue caught by unit tests

* one last e2e test to fix

* update all e2e

* 🌗 feat: support reactive `mode` and `reValidateMode` (#12743)

* feat: support reactive mode and reValidateMode

* minor cleanup

* 🦁 update app deps (#12746)

* wip

* 🐞 fix #12741 regression on move/swap on useFieldArray input update (#12749)

* 🐞 fix #12741 regression on move/swap on useFieldArray input update

* remove unsed code

* simplify the code

* update useFromState

* fix e2e tests

* 7.56.0-next.0

* 7.56.0

* improve other hooks

* update api

* change to useEffect

* rename to consistent value

* update type

* update api contractor

* feat: improve useWatch type when compute prop is specified (#12771)

* Update eslint.config.mjs

* update version

* Revert "update version"

This reverts commit a2711ac.

* 7.57.0-next.0

* update function overload order

* update api contractor

---------

Co-authored-by: KimJunYoung <86667412+candymask0712@users.noreply.github.com>
Co-authored-by: Jacek Tomaszewski <jacek@fullstack.house>
Co-authored-by: Josh Kelley <joshkel@gmail.com>
Co-authored-by: Joris <reixjoris@gmail.com>
Co-authored-by: Jeremy Hughes <jedahu@gmail.com>
Co-authored-by: HoberMin <102784200+HoberMin@users.noreply.github.com>
Co-authored-by: David <53469487+DavidIMk@users.noreply.github.com>
Co-authored-by: Kotaro Sugawara <kotarella1110@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants