import { useForm, useFormState } from 'react-hook-form';

const FooSubscriber = ({ control }) => {
  const {errors} = useFormState({ control, name: 'foo' });
  return <span>{errors.foo?.message}</span>;
};

const App = () => {
  const { register, control } = useForm();

  return (
    <div>
      <form>
        <input {...register('foo')} />
        <input {...register('bar')} />
      </form>
      {/* re-render only when formState of `foo` changes */}
      <FooSubscriber control={control} />
    </div>
  );
};

import { useForm, FormStateSubscribe } from 'react-hook-form';

const App = () => {
  const { register, control } = useForm();

  return (
    <div>
      <form>
        <input {...register('foo')} />
        <input {...register('bar')} />
      </form>
      {/* re-render only when formState of `foo` changes */}
      <FormStateSubscribe
        control={control}
        name={"foo"}
        render={({errors}) => <span>{errors.foo?.message}</span>}
      />
    </div>
  );
};