What is the replacement for watch with callback fn when we intentionally want to trigger rerender?

[Melweder]

I found this unanswered question in another topic: #12946

The question is: how can we replace this functionality when we intentionally want to trigger a re-render based on field's change?
The new subscribe function does not support this directly.
I believe there are plenty of real-world scenarios where we want to react to a change in one field by updating another field. However, the current documentation does not suggest how we should properly migrate the deprecated watch callback fn.

Example:

  useEffect(() => {
    const subscription = watch((values, { name }) => {
      if (name === 'carBrand') {
        resetField('carModel');
      }
    });

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

What is the recommended way to achieve the same effect with the new API?

[FabianoAlm]

This is supported now. It was released in 7.57.0.
Subscribe's callback receives name. Example (based on your excerpt):

useEffect(() => subscribe({
  formState: { values: true },
  callback: ({ name }) => {
    if (name === 'carBrand') resetField('carModel');
  },
}), [subscribe, resetField]);

[omergungor11]

If you specifically want a React render when the brand value changes, useWatch is the API for that. You can observe the primitive brand value and reset the dependent field in an effect:

import { useEffect, useRef } from 'react';
import { useForm, useWatch } from 'react-hook-form';

type Values = { carBrand: string; carModel: string };

function CarForm() {
  const { register, control, resetField } = useForm<Values>({
    defaultValues: { carBrand: '', carModel: '' },
  });
  const brand = useWatch({ control, name: 'carBrand', exact: true });
  const previousBrand = useRef(brand);

  useEffect(() => {
    if (previousBrand.current === brand) return;
    previousBrand.current = brand;
    resetField('carModel', { defaultValue: '' });
  }, [brand, resetField]);

  return (
    <form>
      <input {...register('carBrand')} />
      <input {...register('carModel')} />
    </form>
  );
}

The previous-value guard avoids clearing a preloaded model on initial mount, including React Strict Mode's effect replay. This watches a string, not the entire form object. Model-only changes do not run the reset; setValue('carBrand', ...) does when it changes the brand.

Two details matter for this example:

• resetField('carModel') restores the existing default; it does not necessarily empty the field. The explicit defaultValue: '' above clears it and updates its default. Omit that option if restoring the original default is what you want.
• This is value-change behavior, not an exact replacement for the callback's event-name filter. A bulk reset() that loads another record and changes its brand also triggers it, clearing that record's supplied model. If you only want to clear the model when the user edits the brand, put the reset in the brand field's registered onChange instead. Reassigning the same brand value will not trigger the effect either.

I verified the effect pattern with React Hook Form 7.88.0 and React 19.2.4: initial edit values under Strict Mode, model-only edits, user/programmatic brand changes, repeated same-value updates, and the bulk-reset limitation above.

References: useWatch, resetField. The documented useWatch purpose is an isolated React subscription; that addresses the rendering part of your question directly.