Suggestions for a custom hook called useResetField that I created

[OahMada]

Hi, this is a question regarding React Hook Form, I created an abstraction over RHF’s useWatch and the resetField method returned by useForm to streamline the process of resetting one field based on changes to one or more other fields, since this comes up quite often in the codebase I’m working on.

However, I’m not sure about the performance implications of this hook. What do you guys think?

import {
  useWatch,
  type UseFormResetField,
  type FieldValues,
  type Control,
  type FieldPath,
} from 'react-hook-form';

export default function useResetField<TFieldValues extends FieldValues>(
  control: Control<TFieldValues>,
  watchedFields: FieldPath<TFieldValues> | FieldPath<TFieldValues>[],
  resettingField: FieldPath<TFieldValues>,
  resetField: UseFormResetField<TFieldValues>,
) {
  let watchedValues = useWatch({
    name: Array.isArray(watchedFields) ? watchedFields : [watchedFields],
    control,
    exact: true,
  });

  React.useEffect(() => {
    resetField(resettingField);
  }, [watchedValues, resetField, resettingField]);
}

// later 
useResetField(control, 'field1', 'field2', resetField);

[selmancanklnc]

@OahMada The hook works, but there are two things worth knowing about it, one about performance and one about behaviour.

1. Where the re-renders happen

useWatch re-renders the component that calls it every time a watched field changes. If you call useResetField in the component that owns useForm, the whole form re-renders on every keystroke in field1. That is the real performance cost here, not the effect itself.

You can isolate that re-render by moving the hook into a tiny component that renders nothing:

function ResetOn<T extends FieldValues>(props: {
  control: Control<T>;
  watch: FieldPath<T> | FieldPath<T>[];
  reset: FieldPath<T>;
  resetField: UseFormResetField<T>;
}) {
  useResetField(props.control, props.watch, props.reset, props.resetField);
  return null;
}

// inside the form
<ResetOn control={control} watch="field1" reset="field2" resetField={resetField} />

Now only ResetOn re-renders when field1 changes.

2. The effect runs on mount and on programmatic changes, not only on user edits

useEffect also fires on the first render, so field2 is reset once when the form mounts. That is usually harmless, but it also fires when field1 changes through setValue. If you fill the form with setValue('field1', …) followed by setValue('field2', …), the effect runs after the render and resets field2 back to its default, discarding the value you just set.

3. If the rule is "user changed field1 → reset field2", you may not need a watcher at all

register accepts an onChange callback that runs on user input:

<input {...register('field1', { onChange: () => resetField('field2') })} />

With Controller, call resetField('field2') inside your own onChange next to field.onChange(...). This avoids the subscription, the extra render and the mount/programmatic cases entirely.

I would keep the useWatch version for cases where the trigger really is "the value changed, from any source", and use the event handler when it is "the user changed it".

Small things: let watchedValues can be const, and if the form is wrapped in FormProvider, you can take control and resetField from useFormContext() and drop two of the four parameters.

[OahMada]

Thanks! I think I’m going to implement a dependency API and handle the reset logic inside the onChange handler.

[selmancanklnc]

Sounds good! One thing to watch for with a dependency map: resetField does not fire the reset field's own onChange, so chained dependencies (for example district depends on city, which depends on country) won't cascade on their own. Resolving the chain in one helper keeps it predictable:

const dependents: Partial<Record<FieldPath<FormValues>, FieldPath<FormValues>[]>> = {
  country: ['city'],
  city: ['district'],
};

function resetDependents(name: FieldPath<FormValues>) {
  for (const dep of dependents[name] ?? []) {
    resetField(dep);
    resetDependents(dep);
  }
}

<input {...register('country', { onChange: () => resetDependents('country') })} />

Keep the map free of cycles (or track visited fields), otherwise the recursion never ends.

If this settled it, marking an answer would help others who find the thread later.