improve useWatch type when compute prop is specified#12771
Conversation
|
Size Change: 0 B Total Size: 54.6 kB ℹ️ View Unchanged
|
| control?: Control<TFieldValues>; | ||
| exact?: boolean; | ||
| compute?: <T>(formValues: T) => T; | ||
| compute?: (formValues: any) => any; |
There was a problem hiding this comment.
Curious about the reason why this has to go with any?
There was a problem hiding this comment.
Using <T>(formValues: T) => T as the type for the compute function causes incompatibility with the following overloads:
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.
There was a problem hiding this comment.
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,
|
thanks a lot @kotarella1110 🙏 |
* 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>
Overview: