🧿 type: minor improvement on <Watch /> component (#13077)

* 🧿 chore: minor improvement on Watch component

* save some bytes

* update contract

Author: bluebill1049

reports/api-extractor.md.api.md

@@ -935,11 +935,7 @@ export type ValidationValueMessage<TValidationValue extends ValidationValue = Va
 };
 
 // @public
-export const Watch: <const TFieldNames extends readonly FieldPath<TFieldValues>[], TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues = TFieldValues>({ control, names, render, }: {
-    control: Control<TFieldValues, TContext, TTransformedValues>;
-    names: TFieldNames;
-    render: (values: GetValues<TFieldValues, TFieldNames>) => ReactNode;
-}) => ReactNode;
+export const Watch: <TFieldNames extends readonly FieldPath<TFieldValues>[], TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues = TFieldValues>({ control, names, render, }: WatchProps<TFieldNames, TFieldValues, TContext, TTransformedValues>) => ReactNode;
 
 // @public (undocumented)
 export type WatchInternal<TFieldValues> = (fieldNames?: InternalFieldName | InternalFieldName[], defaultValue?: DeepPartial<TFieldValues>, isMounted?: boolean, isGlobal?: boolean) => FieldPathValue<FieldValues, InternalFieldName> | FieldPathValues<FieldValues, InternalFieldName[]>;
@@ -951,10 +947,17 @@ export type WatchObserver<TFieldValues extends FieldValues> = (value: DeepPartia
     values?: unknown;
 }) => void;
 
+// @public (undocumented)
+export type WatchProps<TFieldNames extends readonly FieldPath<TFieldValues>[], TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues = TFieldValues> = {
+    control: Control<TFieldValues, TContext, TTransformedValues>;
+    names: TFieldNames;
+    render: (values: GetValues<TFieldValues, TFieldNames>) => ReactNode;
+};
+
 // Warnings were encountered during analysis:
 //
 // src/types/form.ts:501:3 - (ae-forgotten-export) The symbol "Subscription" needs to be exported by the entry point index.d.ts
-// src/watch.tsx:59:3 - (ae-forgotten-export) The symbol "GetValues" needs to be exported by the entry point index.d.ts
+// src/watch.tsx:33:3 - (ae-forgotten-export) The symbol "GetValues" needs to be exported by the entry point index.d.ts
 
 // (No @packageDocumentation comment for this package)
 

src/watch.tsx

@@ -22,6 +22,17 @@ type GetValues<
       ? readonly []
       : never;
 
+export type WatchProps<
+  TFieldNames extends readonly FieldPath<TFieldValues>[],
+  TFieldValues extends FieldValues = FieldValues,
+  TContext = any,
+  TTransformedValues = TFieldValues,
+> = {
+  control: Control<TFieldValues, TContext, TTransformedValues>;
+  names: TFieldNames;
+  render: (values: GetValues<TFieldValues, TFieldNames>) => ReactNode;
+};
+
 /**
  * Watch component that subscribes to form field changes and re-renders when watched fields update.
  *
@@ -45,19 +56,15 @@ type GetValues<
  * ```
  */
 export const Watch = <
-  const TFieldNames extends readonly FieldPath<TFieldValues>[],
+  TFieldNames extends readonly FieldPath<TFieldValues>[],
   TFieldValues extends FieldValues = FieldValues,
   TContext = any,
   TTransformedValues = TFieldValues,
 >({
   control,
   names,
   render,
-}: {
-  control: Control<TFieldValues, TContext, TTransformedValues>;
-  names: TFieldNames;
-  render: (values: GetValues<TFieldValues, TFieldNames>) => ReactNode;
-}) => {
-  const values = useWatch({ control, name: names });
-  return render(values as GetValues<TFieldValues, TFieldNames>);
-};
+}: WatchProps<TFieldNames, TFieldValues, TContext, TTransformedValues>) =>
+  render(
+    useWatch({ control, name: names }) as GetValues<TFieldValues, TFieldNames>,
+  );