issue: useController’s fieldState.isValidating breaks the on-demand re-render mechanism, causing performance issues.

[Landon-Liu]

Version Number

7.65.0

Codesandbox/Expo snack

https://codesandbox.io/p/devbox/winter-cookies-d5w5d6

Steps to reproduce

 const {
    field,
    fieldState: { error, isValidating }, // remove isValidating will increase performance
  } = useController({
    name: "name",
    control,
    rules: {
      validate: (value) => {
        console.log("validate name");
        return value.trim() !== "" || "Name is required";
      },
    },
  });

When I try to read fieldState.isValidating, any field’s onChange will trigger all fields to re-render once. This can cause performance issues when there are a large number of fields.

2025-10-31.11.43.53.mov

Expected behaviour

trigger render once

What browsers are you seeing the problem on?

No response

Relevant log output

Code of Conduct

• I agree to follow this project's Code of Conduct

[bugbotbyte]

I looked into this a bit — this behavior is actually expected.

The key thing to understand is that isValidating is not field-level.

When you do:

fieldState: { error, isValidating }

you're indirectly subscribing to formState.isValidating, which is shared across the entire form.

Why all fields re-render

In react-hook-form, anything you read from formState creates a subscription.

So if multiple fields read isValidating:

• one field changes
• validation runs
• isValidating updates
• all fields using it re-render

That’s why removing isValidating improves performance.

What I’d suggest

1. Don’t use isValidating inside fields (most cases). This keeps each field isolated and only re-renders when it actually changes.

2. If you just need a loading indicator. Move it to the parent now only one component listens to it.

const {
  formState: { isValidating }
} = useForm();

{isValidating && <p>Validating...</p>}

3. If you really need per-field loading react-hook-form doesn’t provide that out of the box. You can manage it yourself inside the validation:

const [loading, setLoading] = useState(false);

const { field } = useController({
  name: "name",
  control,
  rules: {
    validate: async (value) => {
      setLoading(true);
      await new Promise((r) => setTimeout(r, 500));
      setLoading(false);
      return value.trim() !== "" || "Name is required";
    },
  },
});

{loading && <span>Checking...</span>}