[Smart Form] How to Watch Specific Form Fields from Parent Component in React Hook Form?

[marcustran98]

I’m currently working with a form component using react-hook-form wrapped inside a SmartForm component. My goal is to be able to watch specific form fields (like name, address, etc.) in the parent component.

Right now, I have a setup where I can watch all form values at once, but I want to limit it to just certain fields from the parent. Is there a clean way to do this? Specifically, I want to pass watch to the parent component and track individual fields as they change.

Here’s what I have so far:

_SmartForm.tsx:_

import { Ref, useImperativeHandle } from 'react';
import {
  FieldValues,
  FormProvider,
  SubmitHandler,
  useForm,
  UseFormProps,
  UseFormReturn,
} from 'react-hook-form';

export interface FormRef<TFormValues = FieldValues> {
  trigger: () => Promise<boolean>;
  getValues: () => TFormValues;
  watch: any;
}

type FormProps<TFormValues extends FieldValues> = {
  className?: string;
  formConfigs?: UseFormProps<TFormValues>;
  shouldUnregister?: boolean;
  formRef?: Ref<FormRef>;
  onSubmit?: SubmitHandler<TFormValues>;
  children: (methods: UseFormReturn<TFormValues>) => React.ReactNode;
};

const SmartForm = <TFormValues extends FieldValues>({
  formRef,
  shouldUnregister,
  formConfigs,
  onSubmit = () => {},
  children,
  ...formElementProps
}: FormProps<TFormValues>) => {
  const formMethods = useForm<TFormValues>({
    ...formConfigs,
    shouldUnregister,
  });

  useImperativeHandle(
    formRef,
    () => ({
      trigger: () => formMethods.trigger(),
      getValues: () => formMethods.getValues(),
      watch: formMethods.watch,
    }),
    [formMethods]
  );

  return (
    <FormProvider {...formMethods}>
      <form {...formElementProps} onSubmit={formMethods.handleSubmit(onSubmit)}>
        {children(formMethods)}
      </form>
    </FormProvider>
  );
};

export default SmartForm;

ParentComponent.tsx:

import React, { useEffect, useRef } from 'react';
import SmartForm from './SmartForm';

const ParentComponent = () => {
  const formRef = useRef<any>(null);

  useEffect(() => {
    if (formRef.current) {
      // How can I watch a specific field of the form (e.g., 'name')?
      const name= formRef.current.watch('name');
  
      // Currently, I can only watch all form values. How can I watch individual fields?
      const { unsubscribe } = formRef.current.watch((values: IFormValues) => {
        console.log('Form values changed:', values); 
      });
  
      return () => unsubscribe();
    }
  }, [formRef]);

  return (
    <SmartForm
      formConfigs={{ defaultValues: { name: '', address: '' }, resolver: zodResolver(FormSchema) }}
      onSubmit={data => console.log(data)}
      formRef={formRef}
    >
      {({ register }) => (
        <>
          <input {...register('name')} placeholder="Name" />
          <input {...register('address')} placeholder="Address" />
        </>
      )}
    </SmartForm>
  );
};

export default ParentComponent;

CodeSanbox Link

What I Need Help With:

• How can I watch specific fields like name or address from the parent component, rather than watching the entire form?
• Is there a way to cleanly access only those specific fields in the parent, without watching the entire form state?
• Best practices for exposing form methods to the parent component while keeping the implementation clean and maintainable?

[marcustran98]

@bluebill1049 Could you please give me some ideas? Thanks

[BrendanC23]

There are two variants of watch. It can take either a name or array of names to watch, or a callback function that runs on every change. With the way your code is structured, the callback option is probably the best choice. You will need to manually filter the calls to only watch specific fields. watch takes a parameter with the name of the field and the event that triggered the watch (usually change or an empty string). If you call setValue from within watch, it will call watch again with an empty type, so you will need to ignore these to prevent infinite loops.

const FIELDS_TO_WATCH = ["name"];

const { unsubscribe } = formRef.current.watch((values: IFormValues, { name, type }: { name: string, type: EventType }) => {
    if (!FIELDS_TO_WATCH.includes(name) || !type) return;
    console.log('Form values changed:', values);
});

This will work, but I'm confused about why you are trying to watch values in the parent component even though the form is defined in the child. That seems like a lot of extra boilerplate and complexity for no gain. In particular, all of the complexity with refs seems unnecessary (context might be better). What about something like this?

function Parent() {
    function watchCallback(name: string) {
    }

    return (
        <Child watchCallback={watchCallback}  />
    );
}

const FIELDS_TO_WATCH = ["name"];

function Child({ watchCallback }: { watchCallback?: (name: string) => void }) {
    const form = useForm();
    const { watch } = form;

    useEffect(() => {
        const subscription = watch((_value, { name, type }) => {
            if (!FIELDS_TO_WATCH.includes(name) || !type) return;
        
            watchCallback.?(name);
        });

        return () => subscription.unsubscribe();
    }, [watch]);

    return (
        <form>
        </form>
    )
}

[marcustran98]

That's a good idea, but the form will be re-rendered too many times. Thanks for your suggestion.

[DuyThanh1211]

import {
  FieldValues,
  FormProvider,
  Path,
  SubmitHandler,
  useForm,
  UseFormProps,
  UseFormReturn,
} from "react-hook-form";

export interface FormRef<TFormValues = FieldValues> {
  trigger: () => Promise<boolean>;
  getValues: () => TFormValues;
  watch: (callback: (values: TFormValues) => void) => {
    unsubscribe: () => void;
  };
}

type FormProps<TFormValues extends FieldValues> = {
  className?: string;
  formConfigs?: UseFormProps<TFormValues>;
  shouldUnregister?: boolean;
  formRef?: Ref<FormRef<TFormValues>>;
  onSubmit?: SubmitHandler<TFormValues>;
  watchFields?: Path<TFormValues>[]; // New prop for specific fields to watch
  onFieldsChange?: (values: Partial<TFormValues>) => void;
  children: (methods: UseFormReturn<TFormValues>) => React.ReactNode;
};

const SmartForm = <TFormValues extends FieldValues>({
  formRef,
  shouldUnregister,
  formConfigs,
  onSubmit = () => {},
  watchFields = [],
  onFieldsChange,
  children,
  ...formElementProps
}: FormProps<TFormValues>) => {
  const formMethods = useForm<TFormValues>({
    ...formConfigs,
    shouldUnregister,
  });

  useImperativeHandle(
    formRef,
    () => ({
      trigger: () => formMethods.trigger(),
      getValues: () => formMethods.getValues(),
      watch: (callback) =>
        formMethods.watch((values) => callback(values as TFormValues)),
    }),
    [formMethods]
  );

  useEffect(() => {
    if (watchFields.length > 0 && onFieldsChange) {
      const subscription = formMethods.watch((values) => {
        const watchedValues = watchFields.reduce((acc, field) => {
          acc[field] = values[field];
          return acc;
        }, {} as Partial<TFormValues>);

        onFieldsChange(watchedValues);
      });

      return () => subscription.unsubscribe();
    }
  }, [formMethods, watchFields, onFieldsChange]);

  return (
    <FormProvider {...formMethods}>
      <form {...formElementProps} onSubmit={formMethods.handleSubmit(onSubmit)}>
        {children(formMethods)}
      </form>
    </FormProvider>
  );
};

export default SmartForm;

---
```import { useRef } from "react";
import SmartForm, { FormRef } from "./form/SmartForm";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { Input } from "@/components/ui/input";

// Define form validation schema
const FormSchema = z.object({
  name: z.string().min(1, "Name is required"),
  address: z.string().min(1, "Address is required"),
});

// Define form values interface
interface IFormValues {
  name: string;
  address: string;
}
--- ParentComponent.tsx
const ParentComponent = () => {
  const formRef = useRef<FormRef<IFormValues>>(null);

  //   useEffect(() => {
  //     if (formRef.current) {
  //       // Set up individual field watchers
  //       const nameSubscription = formRef.current.watch((values) => {
  //         console.log("Name changed:", values.name);
  //       });

  //       const addressSubscription = formRef.current.watch((values) => {
  //         console.log("Address changed:", values.address);
  //       });

  //       // Clean up subscriptions
  //       return () => {
  //         nameSubscription.unsubscribe();
  //         addressSubscription.unsubscribe();
  //       };
  //     }
  //   }, [formRef]);
  const handleSubmit = (data: IFormValues) => {
    console.log("Form submitted:", data);
    // Add form submission logic here
  };
  //Handler for field changes
  const handleFieldsChange = (values: Partial<IFormValues>) => {
    console.log("Fields changed:", values);
  };

  return (
    <SmartForm<IFormValues>
      formConfigs={{
        defaultValues: { name: "", address: "" },
        resolver: zodResolver(FormSchema),
        mode: "onChange", // Enable real-time validation
      }}
      onSubmit={handleSubmit}
      formRef={formRef}
      watchFields={["name", "address"]} // Specify fields to watch
      onFieldsChange={handleFieldsChange}
    >
      {({ register, formState: { errors } }) => {
        return (
          <div className="form-container">
            <div className="form-field">
              <Input
                {...register("name")}
                placeholder="Name"
                className="form-input"
              />
              {errors.name && (
                <span className="error-message">{errors.name.message}</span>
              )}
            </div>

            <div className="form-field">
              <Input
                {...register("address")}
                placeholder="Address"
                className="form-input"
              />
              {errors.address && (
                <span className="error-message">{errors.address.message}</span>
              )}
            </div>
          </div>
        );
      }}
    </SmartForm>
  );
};

export default ParentComponent;

[marcustran98]

Thank you for your kind support. With the new coding approach, it will align with BrendanC23's idea. See the comment: (https://github.com/orgs/react-hook-form/discussions/12410#discussioncomment-11227318).

Additionally, we might face issues with form re-renders. The best approach is to only watch the fields that we need when they change. Using a filter on the fields we want is not considered best practice."

[marcustran98]

I have a new solution, but it’s not best practice because we can only watch one group of fields at a time. For example, right now we are watching the address and name fields. However, if in the future we want to watch a different group, like ['age', 'id'] or add multiple groups, it will be challenging to customize

<Form 
  watchFields={['address', 'name']}
  watchCallback={(values) => {
    const [address, name] = values;
  }}
/> 

const data = formMethods.watch(watchFields);

useEffect(() => {
  watchCallback(data);
}, [data]);