Field State updates not working without console.log

[whatever010101]

I'm using React Hook Form (v7) with a custom useFormField hook that uses getFieldState. I've noticed that real-time field state updates (like validation states) only work when I include a console.info statement in the hook. Without it, the component doesn't return the correct value for the field states.

Code that doesn't work

function useFormField() {
  const formField = use(FormFieldContext);
  const { id } = use(FormItemContext);
  const { getFieldState } = useFormContext();
  const { invalid, isDirty, error, isValidating, isTouched } = getFieldState(formField.name);
  
  return {
    id,
    name: formField.name,
    invalid,
    isDirty,
    error,
    isValidating,
    isTouched
  };
}

function useFormField() {
  const formField = use(FormFieldContext);
  const { id } = use(FormItemContext);
  const { getFieldState } = useFormContext();
  const { invalid, isDirty, error, isValidating, isTouched } = getFieldState(formField.name);
  
  // Without this console.info, field state updates don't work
  console.info("fieldState", JSON.stringify({ invalid, isDirty, error, isValidating, isTouched }, null, 3));
  
  return {
    id,
    name: formField.name,
    invalid,
    isDirty,
    error,
    isValidating,
    isTouched
  };
}

Why does field state updating depend on console.info, and what's the proper way to handle this? Is this a known issue with React Hook Form's subscription system? I'm really confused. I can't wrap my head around this.

[burakcankrpnr]

I don't think the console.info itself is causing the field state to update. It is more likely exposing a subscription/rendering issue.

getFieldState() reads the current field state, but calling it alone does not subscribe the component to future state changes. For a component that needs to re-render when field state changes, useFormState is a better fit.

For example:

const { errors, dirtyFields, touchedFields, validatingFields } = useFormState({
name: formField.name,
});

const error = errors[formField.name];
const isDirty = !!dirtyFields[formField.name];
const isTouched = !!touchedFields[formField.name];

This makes the component explicitly subscribe to the relevant form state instead of relying on getFieldState() to trigger re-renders.

Another option is to pass the formState into getFieldState:

const { formState, getFieldState } = useFormContext();

const { invalid, isDirty, error, isTouched } =
getFieldState(formField.name, formState);

So I would treat the console.info behavior as a symptom of a missing subscription rather than something React Hook Form intentionally depends on.