Isolate Re-renders when triggering Validation

[tybruffy]

If you trigger validation on any single field, there doesn't seem to be any way to isolate the re-render to only the component that is reading the Error for that field. Any components that read the error state will re-render, even if they are ostensibly only reading the state for their own field as well.

I would think that a component that has the following code:

  const { getFieldState } = useFormContext();
  const formState = useFormState();
  const { error } = getFieldState("someFieldName", formState) as FieldError;

Would only be subscribed to changes in the error for someFieldName and not for all error updates, but in fact this will re-render when any field is validated.

Example CSB:

https://codesandbox.io/p/sandbox/react-hook-form-v7-ts-triggervalidation-forked-2dy577

In the example, if you trigger validation on the First Name field, both inputs will re-render and the render count will update.