# Watch

> A React component that subscribes to form input changes and re-renders only its children, scoping updates for better performance.

Source: https://react-hook-form.com/docs/usewatch/watch

## `Watch:` [WatchProps](https://react-hook-form.com/ts#WatchProps) _(since v7.65.0)_

A React Hook Form component that provides the same functionality as `useWatch`, but in component form. Instead of using the hook inside another component, you can use `<Watch />` directly in your JSX to subscribe to and render form values.

### Props

---

| Name           | Type                                                 | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| -------------- | ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `name`         | `string \| string[] \| undefined` | Name of the field(s) to subscribe to. (The deprecated `names` prop is still accepted for backwards compatibility, but will be removed in a future major version — use `name` instead.)                                                                                                                                                                                                                                                                                                                                                                                   |
| `control`      | `Object`                          | [`control`](https://react-hook-form.com/docs/useform/control) object provided by `useForm`. It's optional if you are using `FormProvider`.                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| `compute`      | `function`                        | <p>Subscribe to selective and computed form values.</p><ul><li>Subscribe to the entire form but only return updated value with certain condition<pre><code>const watchedValue = useWatch({<br/>  compute: (data: FormValue) =&gt; { <br/>    if (data.test?.length) return data.test; <br/><br/>    return ''; <br/>  }, <br/>});</code></pre></li><li>Subscribe to a specific form value state<pre><code>const watchedValue = useWatch({<br/>  name: 'test', <br/>  compute: (data: string) =&gt; { <br/>    return data.length ? data : ''; <br/>  }, <br/>});</code></pre></li></ul> |
| `defaultValue` | `unknown`                         | Fallback value returned before the form has mounted and no current value exists yet. Once the form is mounted, the actual current form value takes precedence over this fallback.                                                                                                                                                                                                                                                                                                                                                                                        |
| `disabled`     | `boolean = false`                 | Option to disable the subscription.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| `exact`        | `boolean = false`                 | Enable exact name matching. When `false` (default), the subscription fires when the subscribed name is a prefix of the changed field name, or vice versa. _(since v7.81.0)_ When `true`, it fires when the subscribed field itself or one of its ancestor paths is updated, but not when a nested child path changes. See [`useWatch`](https://react-hook-form.com/docs/usewatch) for details.                                                                                                                                                                                             |
| `render`       | `Function`                        | Subscribes to specified form field(s) and re-renders its child function whenever the values change. This allows you to declaratively consume form values in JSX without manually wiring up state.                                                                                                                                                                                                                                                                                                                                                                        |

### Examples

---

```tsx
import { useForm, Watch } from "react-hook-form"

const App = () => {
  const { register, control } = useForm()

  return (
    <div>
      <form>
        <input {...register("foo")} />
        <input {...register("bar")} />
      </form>
      {/* re-render only when value of `foo` changes */}
      <Watch
        control={control}
        name={["foo"]}
        render={([foo]) => <span>{foo}</span>}
      />
    </div>
  )
}
```

### Tips

---

- Show and hide fields without re-rendering the whole form:

  ```javascript
  <Watch
    control={control}
    name="hasPhone"
    render={(hasPhone) => hasPhone && <input {...register("phone")} />}
  />
  ```

- Use `compute` to re-render only when a derived value changes. For example, with `name="items"`, `compute={(items = []) => items.length}` re-renders only when the number of items changes.
- `Watch` is a component, so you can render it conditionally or inside a list. Hooks such as `useWatch` cannot be called that way.