deprecate doc on watch callback and add warning

Author: bluebill1049

src/content/docs/useform/subscribe.mdx

@@ -15,7 +15,7 @@ Subscribe to [`formState`](/docs/useform/formState) changes and value updates. Y
 | Name      | Type                                          | Description                                                         | Example                                                                                                                                                                                                                                                               |
 | --------- | --------------------------------------------- | ------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | name      | <TypeText>undefined</TypeText>                | Subscribe to the entire form                                        | `subscribe()`                                                                                                                                                                                                                                                         |
-|           | <TypeText>string[]</TypeText>                 | Subscribe on multiple fields by **name**.                           | `subscribe({ name: ['firstName', 'lastName'] })`                                                                                                                                                                                                                                |
+|           | <TypeText>string[]</TypeText>                 | Subscribe on multiple fields by **name**.                           | `subscribe({ name: ['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 })`                                                                                                                                                                                                                          |

src/content/docs/useform/watch.mdx

@@ -12,12 +12,9 @@ This method will watch specified inputs and return their values. It is useful to
 
 This function mainly serves **two purposes**:
 
-1. Returns and keep sync with fields' values
-   a. <TypeText>`watch(name: string, defaultValue?): unknown`</TypeText>
-   b. <TypeText>`watch(names: string[], defaultValue?): {[key:string]: unknown}`</TypeText>
-   c. <TypeText>`watch(): {[key:string]: unknown}`</TypeText>
-2. Start subscribing with given callback function (can be stopped by calling `unsubscribe` function)
-   a. <TypeText>`watch(callback: (data, { name, type }) => void, defaultValues?): { unsubscribe: () => void }`</TypeText>
+- <TypeText>`watch(name: string, defaultValue?): unknown`</TypeText>
+- <TypeText>`watch(names: string[], defaultValue?): {[key:string]: unknown}`</TypeText>
+- <TypeText>`watch(): {[key:string]: unknown}`</TypeText>
 
 The explanation of each of these four overloads follows below.
 
@@ -73,7 +70,7 @@ Watch and subscribe to the entire form update/change based on onChange and re-re
 const formValues = watch()
 ```
 
-#### 2. Start watching with callback fn <TypeText>`watch(callback: (data, { name, type }) => void, defaultValues?: {[key:string]: unknown}): { unsubscribe: () => void }`</TypeText>
+#### 2. <b>Deprecated:</b> consider use or migrate to [subscribe](/docs/useform/subscribe). Watching with callback fn <TypeText>`watch(callback: (data, { name, type }) => void, defaultValues?: {[key:string]: unknown}): { unsubscribe: () => void }`</TypeText>
 
 ---
 
@@ -88,15 +85,6 @@ Subscribe to field update/change without trigger re-render.
 
 **Returns** object with `unsubscribe` function.
 
-```tsx
-useEffect(() => {
-  const { unsubscribe } = watch((value) => {
-    console.log(value)
-  })
-  return () => unsubscribe()
-}, [watch])
-```
-
 ### Rules
 
 ---
@@ -134,14 +122,6 @@ function App() {
   const watchAllFields = watch() // when pass nothing as argument, you are watching everything
   const watchFields = watch(["showAge", "age"]) // you can also target specific fields by their names
 
-  // Callback version of watch.  It's your responsibility to unsubscribe when done.
-  React.useEffect(() => {
-    const subscription = watch((value, { name, type }) =>
-      console.log(value, name, type)
-    )
-    return () => subscription.unsubscribe()
-  }, [watch])
-
   const onSubmit = (data: IFormInputs) => console.log(data)
 
   return (
@@ -174,14 +154,6 @@ function App() {
   const watchAllFields = watch() // when pass nothing as argument, you are watching everything
   const watchFields = watch(["showAge", "number"]) // you can also target specific fields by their names
 
-  // Callback version of watch.  It's your responsibility to unsubscribe when done.
-  React.useEffect(() => {
-    const subscription = watch((value, { name, type }) =>
-      console.log(value, name, type)
-    )
-    return () => subscription.unsubscribe()
-  }, [watch])
-
   const onSubmit = (data) => console.log(data)
 
   return (