udpate doc on subscribe (#1146)

bluebill1049 · web-flow · commit 5c69e15321b9 · 2025-05-18T11:42:49.000+10:00
* udpate doc on subscribe

* update doc and packages

* rename to just target

* update doc

* update format
diff --git a/package.json b/package.json
@@ -16,7 +16,7 @@
     "next-contentlayer": "^0.3.4",
     "next-themes": "^0.2.1",
     "prism-react-renderer": "^2.4.1",
-    "prismjs": "^1.29.0",
+    "prismjs": "^1.30.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-github-btn": "1.4.0",
@@ -46,8 +46,8 @@
     "eslint-plugin-react-hooks": "5.1.0",
     "husky": "^8.0.3",
     "lint-staged": "^13.3.0",
-    "prettier": "^3.4.2",
-    "typescript": "^5.7.3",
+    "prettier": "^3.5.3",
+    "typescript": "^5.8.3",
     "typescript-eslint": "8.18.1"
   },
   "keywords": [
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/Menu/MenuLinks.ts b/src/components/Menu/MenuLinks.ts
@@ -107,6 +107,7 @@ export const apiLinks: Pages = [
       { pathname: "/docs/useform/unregister", name: "unregister" },
       { pathname: "/docs/useform/formstate", name: "formState" },
       { pathname: "/docs/useform/watch", name: "watch" },
+      { pathname: "/docs/useform/subscribe", name: "subscribe" },
       { pathname: "/docs/useform/handlesubmit", name: "handleSubmit" },
       { pathname: "/docs/useform/reset", name: "reset" },
       { pathname: "/docs/useform/resetfield", name: "resetField" },
diff --git a/src/components/codeExamples/formState.ts b/src/components/codeExamples/formState.ts
@@ -1,5 +1,4 @@
-export default `import React from "react";
-import { useForm } from "react-hook-form";
+export default `import { useForm } from "react-hook-form";
 
 export default function App() {
   const {
diff --git a/src/components/codeExamples/formStateUseEffectTs.ts b/src/components/codeExamples/formStateUseEffectTs.ts
@@ -1,5 +1,4 @@
-export default `import React from "react";
-import { useForm } from "react-hook-form";
+export default `import { useForm } from "react-hook-form";
 type FormInputs = {
   test: string
 }
diff --git a/src/components/codeExamples/useFieldArray.ts b/src/components/codeExamples/useFieldArray.ts
@@ -1,5 +1,4 @@
-export default `import React from "react";
-import { useForm, useFieldArray } from "react-hook-form";
+export default `import { useForm, useFieldArray } from "react-hook-form";
 
 function App() {
   const { register, control, handleSubmit, reset, trigger, setError } = useForm({
diff --git a/src/components/layout.css b/src/components/layout.css
@@ -56,8 +56,9 @@ body {
   -ms-font-feature-settings: "kern", "liga", "clig", "calt";
   -webkit-font-feature-settings: "kern", "liga", "clig", "calt";
   font-feature-settings: "kern", "liga", "clig", "calt";
-  font-family: "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
-    "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  font-family:
+    "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
+    "Droid Sans", "Helvetica Neue", sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-size: 0.9rem;
diff --git a/src/components/sponsorsList.tsx b/src/components/sponsorsList.tsx
@@ -23,7 +23,11 @@ export function SponsorsList() {
         >
           <img src="/images/route4me.png" alt="route4me" />
         </a>
-        <a href="https://www.follower24.de/" target="_blank" rel="noopener noreferrer">
+        <a
+          href="https://www.follower24.de/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
           <img
             className={styles.twicsy}
             src="/images/follower24.png"
diff --git a/src/content/docs/createFormControl.mdx b/src/content/docs/createFormControl.mdx
@@ -18,11 +18,12 @@ This function create the entire form state subscription and allow you to subscri
 
 ---
 
-| Name          | Type                           | Description                                                    |
-| ------------- | ------------------------------ | -------------------------------------------------------------- |
-| `formControl` | <TypeText>Object</TypeText>    | control object for `useForm` hook                              |
-| `control`     | <TypeText>Object</TypeText>    | control object for `useController`, `useFormState`, `useWatch` |
-| `...returns`  | <TypeText>Functions</TypeText> | `useForm` return methods                                       |
+| Name          | Type                           | Description                                                                           |
+| ------------- | ------------------------------ | ------------------------------------------------------------------------------------- |
+| `formControl` | <TypeText>Object</TypeText>    | control object for `useForm` hook                                                     |
+| `control`     | <TypeText>Object</TypeText>    | control object for `useController`, `useFormState`, `useWatch`                        |
+| `subscribe`   | <TypeText>Function</TypeText>  | function to [subscribe](/docs/useform/subscribe) for form state update without render |
+| `...returns`  | <TypeText>Functions</TypeText> | `useForm` return methods                                                              |
 
 <Admonition type="important" title="Notes">
   - This function is published at **v7.55.0** - This function is completely
diff --git a/src/content/docs/formprovider.mdx b/src/content/docs/formprovider.mdx
@@ -27,8 +27,6 @@ This following table applied to `FormProvider`, `useFormContext` accepts no argu
 ---
 
 ```javascript copy sandbox="https://codesandbox.io/s/react-hook-form-v7-form-context-ytudi"
-import React from "react"
-
 import { useForm, FormProvider, useFormContext } from "react-hook-form"
 
 export default function App() {
diff --git a/src/content/docs/usecontroller/controller.mdx b/src/content/docs/usecontroller/controller.mdx
@@ -96,7 +96,6 @@ function App() {
 ```
 
 ```javascript copy sandbox="https://codesandbox.io/s/react-hook-form-v7-controller-5h1q5"
-import React from "react"
 import ReactDatePicker from "react-datepicker"
 import { TextField } from "@material-ui/core"
 import { useForm, Controller } from "react-hook-form"
diff --git a/src/content/docs/useform.mdx b/src/content/docs/useform.mdx
@@ -442,7 +442,6 @@ npm install @hookform/resolvers
 <TabGroup buttonLabels={["Yup","Zod","Joi","Ajv","Vest", "Custom"]}>
 
 ```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-apply-validation-ts-forked-nmbyh"
-import React from "react"
 import { useForm } from "react-hook-form"
 import { yupResolver } from "@hookform/resolvers/yup"
 import * as yup from "yup"
@@ -507,7 +506,6 @@ const App = () => {
 ```
 
 ```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-joiresolver-v6-ts-forked-5pseh"
-import React from "react";
 import { useForm } from "react-hook-form";
 import { joiResolver } from "@hookform/resolvers/joi";
 import Joi from "joi";
diff --git a/src/content/docs/useform/control.mdx b/src/content/docs/useform/control.mdx
@@ -21,7 +21,6 @@ This object contains methods for registering components into React Hook Form.
 <TabGroup buttonLabels={["TS", "JS"]}>
 
 ```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-v6-controller-ts-jwyzw"
-import React from "react"
 import { useForm, Controller } from "react-hook-form"
 import { TextField } from "@material-ui/core"
 
diff --git a/src/content/docs/useform/getvalues.mdx b/src/content/docs/useform/getvalues.mdx
@@ -50,7 +50,6 @@ The example below shows what to expect when you invoke `getValues` method.
 <TabGroup buttonLabels={["TS", "JS", "Types"]}>
 
 ```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-v7-ts-getvalues-txsfg"
-import React from "react"
 import { useForm } from "react-hook-form"
 
 type FormInputs = {
diff --git a/src/content/docs/useform/handlesubmit.mdx b/src/content/docs/useform/handlesubmit.mdx
@@ -55,7 +55,6 @@ This function will receive the form data if form validation is successful.
 <TabGroup buttonLabels={["TS", "JS"]}>
 
 ```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-handlesubmit-ts-v7-lcrtu"
-import React from "react"
 import { useForm, SubmitHandler, SubmitErrorHandler } from "react-hook-form"
 
 type FormValues = {
@@ -104,7 +103,6 @@ export default function App() {
 **Async**
 
 ```javascript copy sandbox="https://codesandbox.io/s/react-hook-form-async-submit-validation-kpx0o"
-import React from "react";
 import { useForm } from "react-hook-form";
 
 const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
diff --git a/src/content/docs/useform/reset.mdx b/src/content/docs/useform/reset.mdx
@@ -156,7 +156,6 @@ export default function App() {
 <TabGroup buttonLabels={["TS", "JS"]}>
 
 ```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-v6-controller-ts-jwyzw"
-import React from "react"
 import { useForm, Controller } from "react-hook-form"
 import { TextField } from "@material-ui/core"
 
diff --git a/src/content/docs/useform/subscribe.mdx b/src/content/docs/useform/subscribe.mdx
@@ -0,0 +1,82 @@
+---
+title: subscribe
+description: Subscribe to form state update without render
+sidebar: apiLinks
+---
+
+## `subscribe:` <TypeText>`UseFromSubscribe<TFieldValues extends FieldValues>`</TypeText>
+
+Subscribe to [`formState`](/docs/useform/formState) changes and value updates. You can subscribe to individual fields or the entire form, while avoiding unnecessary re-renders caused by form changes.
+
+### Props
+
+---
+
+| Name      | Type                                          | Description                                                         | Example                                                                                                                                                                                                                                                               |
+| --------- | --------------------------------------------- | ------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| name      | <TypeText>undefined</TypeText>                | Subscribe to the entire form                                        | `subscribe()`                                                                                                                                                                                                                                                         |
+|           | <TypeText>string</TypeText>                   | Subscribe on a specific field value by **name**                     | `subscribe({ name: 'test' })`                                                                                                                                                                                                                                         |
+|           | <TypeText>string[]</TypeText>                 | Subscribe on multiple fields by **name**.                           | `subscribe(['firstName', 'lastName'])`                                                                                                                                                                                                                                |
+| formState | <TypeText>`Partial<ReadFormState>`</TypeText> | Pick which [`formState`](/docs/useform/formState) to be subscribed. | <CodeArea withOutCopy rawData={`subscribe({ \n  formState: { \n    values: true, \n    isDirty: true, \n    dirtyFields: true, \n    touchedFields: true, \n    isValid: true, \n    errors: true, \n    defaultValues: true, \n    isSubmitted: true  \n  } \n})`}/> |
+| callback  | <TypeText>`Function`</TypeText>               | The callback function for the subscription.                         | <CodeArea withOutCopy rawData={`subscribe({ \n  formState: { \n    values: true \n  }, \n  callback: ({ values }) => { \n    console.log(values) \n  } \n})`}/>                                                                                                       |
+| exact     | <TypeText>boolean</TypeText>                  | This prop will enable an exact match for input name subscriptions.  | `subscribe({ name: 'target', exact: true })`                                                                                                                                                                                                                          |
+
+<Admonition type="important" title="Notes">
+
+<ul>
+  <li>
+    <p>
+      This function shares the same functionality as{" "}
+      <code>createFormControl.subscribe</code>, with the key difference being
+      that [createFormControl](/docs/createFormControl) can be initialized
+      outside of a React component.
+    </p>
+  </li>
+  <li>
+    <p>
+      This function is dedicated for subscribe form state without **render**,
+      use this function for that instead of [watch](/docs/useform/watch)
+      callback function.
+    </p>
+  </li>
+</ul>
+
+</Admonition>
+
+**Examples:**
+
+---
+
+```typescript copy
+import { useForm } from "react-hook-form"
+
+type FormInputs = {
+  firstName: string
+  lastName: string
+}
+
+export default function App() {
+  const { register, subscribe } = useForm<FormInputs>()
+
+  useEffect(() => {
+    // make sure to unsubscribe;
+    const callback = subscribe({
+      callback: ({ values }) => {
+        console.log(values);
+      }
+    })
+
+    return () => callback();
+
+    // You can also just return the subscribe
+    // return subscribe();
+  }, [subscribe])
+
+  return (
+    <form>
+      <input {...register("firstName", { required: true })} />
+      <input {...register("lastName", { required: true })} />
+    </form>
+  )
+}
+```
diff --git a/src/content/docs/useform/trigger.mdx b/src/content/docs/useform/trigger.mdx
@@ -32,7 +32,6 @@ Isolate render optimisation only applicable for targeting a single field name wi
 <TabGroup buttonLabels={["TS", "JS"]} >
 
 ```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-v6-ts-triggervalidation-forked-xs7hl"
-import React from "react"
 import { useForm } from "react-hook-form"
 
 type FormInputs = {
@@ -81,7 +80,6 @@ export default function App() {
 ```
 
 ```javascript copy sandbox="https://codesandbox.io/s/react-hook-form-v6-triggervalidation-forked-8w9tn"
-import React from "react"
 import { useForm } from "react-hook-form"
 
 export default function App() {
diff --git a/src/content/docs/useform/watch.mdx b/src/content/docs/useform/watch.mdx
@@ -115,7 +115,6 @@ useEffect(() => {
 <TabGroup buttonLabels={["TS", "JS"]}>
 
 ```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-watch-v7-ts-8et1d"
-import React from "react"
 import { useForm } from "react-hook-form"
 
 interface IFormInputs {
@@ -162,7 +161,6 @@ function App() {
 ```
 
 ```javascript copy sandbox="https://codesandbox.io/s/react-hook-form-watch-v7-qbxd7"
-import React from "react"
 import { useForm } from "react-hook-form"
 
 function App() {
diff --git a/src/content/docs/useformcontext.mdx b/src/content/docs/useformcontext.mdx
@@ -39,7 +39,6 @@ const methods = useFormContext() // retrieve those props
 **Example:**
 
 ```javascript copy codesandbox="https://codesandbox.io/s/react-hook-form-v7-form-context-ytudi"
-import React from "react"
 import { useForm, FormProvider, useFormContext } from "react-hook-form"
 
 export default function App() {
diff --git a/src/content/docs/useformstate/errormessage.mdx b/src/content/docs/useformstate/errormessage.mdx
@@ -33,7 +33,6 @@ npm install @hookform/error-message
 <TabGroup buttonLabels={["TS", "JS"]} >
 
 ```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-v7-ts-errormessage-d1ues"
-import React from "react"
 import { useForm } from "react-hook-form"
 import { ErrorMessage } from "@hookform/error-message"
 
@@ -69,7 +68,6 @@ export default function App() {
 ```
 
 ```javascript copy sandbox="https://codesandbox.io/s/react-hook-form-v7-errormessage-jufsl"
-import React from "react"
 import { useForm } from "react-hook-form"
 import { ErrorMessage } from "@hookform/error-message"
 
@@ -107,7 +105,6 @@ export default function App() {
 <TabGroup buttonLabels={["TS", "JS"]}>
 
 ```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-v6-ts-errormessage-multiple-error-messages-forked-sy5f0"
-import React from "react"
 import { useForm } from "react-hook-form"
 import { ErrorMessage } from "@hookform/error-message"
 
diff --git a/src/content/docs/usewatch.mdx b/src/content/docs/usewatch.mdx
@@ -70,7 +70,6 @@ Behaves similarly to the `watch` API, however, this will isolate re-rendering at
 <TabGroup buttonLabels={["TS", "JS"]} >
 
 ```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-v7-ts-usewatch-h9i5e"
-import React from "react"
 import { useForm, useWatch } from "react-hook-form"
 
 interface FormInputs {
@@ -109,7 +108,6 @@ function App() {
 ```
 
 ```javascript copy sandbox="https://codesandbox.io/s/react-hook-form-v7-usewatch-forked-9872t"
-import React from "react"
 import { useForm, useWatch } from "react-hook-form"
 
 function Child({ control }) {
@@ -142,7 +140,6 @@ function App() {
 **Advanced Field Array**
 
 ```javascript copy sandbox="https://codesandbox.io/s/watchusewatch-calc-4tpnh"
-import React from "react"
 import { useWatch } from "react-hook-form"
 
 function totalCal(results) {
diff --git a/src/content/faqs.mdx b/src/content/faqs.mdx
@@ -16,7 +16,6 @@ React Hook Form is based on Uncontrolled Components, which gives you the ability
 _(For more information about Uncontrolled Components, read [Sharing State Between Components](https://react.dev/learn/sharing-state-between-components))_
 
 ```javascript copy
-import React from "react"
 import { useForm } from "react-hook-form"
 
 export default function App() {
@@ -278,7 +277,6 @@ First of all, all libs try to solve the same problem: make the form building exp
 React Hook Form doesn't control your entire form and inputs, which is why React wouldn't recognize that the actual input has been exchanged or swapped. As a solution, you can resolve this problem by giving a unique `key` prop to your input. You can also read more about the key props from [this article written by Kent C. Dodds](https://kentcdodds.com/blog/understanding-reacts-key-prop).
 
 ```javascript sandbox="https://codesandbox.io/s/react-hook-form-faq-toggle-fields-3htr6" copy
-import React from "react"
 import { useForm } from "react-hook-form"
 
 export default function App() {
diff --git a/src/content/ts.mdx b/src/content/ts.mdx
@@ -9,7 +9,6 @@ sidebar: tsLinks
 ## \</> Resolver {#Resolver}
 
 ```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-resolver-forked-mjsx7"
-import React from "react"
 import { useForm, Resolver } from "react-hook-form"
 
 type FormValues = {
@@ -57,7 +56,6 @@ export default function App() {
 ## \</> SubmitHandler {#SubmitHandler}
 
 ```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-handlesubmit-ts-v7-z9z0g"
-import React from "react"
 import { useForm, SubmitHandler } from "react-hook-form"
 
 type FormValues = {
@@ -87,7 +85,6 @@ export default function App() {
 ## \</> SubmitErrorHandler {#SubmitErrorHandler}
 
 ```typescript copy
-import React from "react"
 import { useForm, SubmitHandler, SubmitErrorHandler } from "react-hook-form"
 
 type FormValues = {
@@ -183,7 +180,6 @@ export type UseFormReturn<
 
 ```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-UseFormReturn-forked-yl40u"
 import type { FieldValues, UseFormReturn, SubmitHandler } from "react-hook-form"
-import React from "react"
 import { useForm } from "react-hook-form"
 
 type InputProps = React.DetailedHTMLProps<
@@ -549,7 +545,6 @@ export type FormStateProxy<TFieldValues extends FieldValues = FieldValues> = {
 <TabGroup buttonLabels={["Code Example", "Type"]}>
 
 ```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-nestedvalue-lskdv"
-import React from "react"
 import { useForm, NestedValue } from "react-hook-form"
 import { Autocomplete, TextField, Select } from "@material-ui/core"
 import { Autocomplete } from "@material-ui/lab"
diff --git a/src/data/api.tsx b/src/data/api.tsx
diff --git a/src/styles/typography.module.css b/src/styles/typography.module.css

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,4 @@`
`1`		-export default `import React from "react";
`2`		`-import { useForm } from "react-hook-form";`
	`1`	+export default `import { useForm } from "react-hook-form";
`3`	`2`	`type FormInputs = {`
`4`	`3`	`test: string`
`5`	`4`	`}`