useFieldArray + watch

[kuket15]

As stated in the doc, with the following code, each onChange reflects on the fields object and causes the component to rerender.

import { useForm, useFieldArray } from "react-hook-form";

export default function App() {
  const { register, handleSubmit, control, watch } = useForm<FormValues>();
  const { fields, append } = useFieldArray({
    control,
    name: "fieldArray"
  });
  const watchFieldArray = watch("fieldArray");
  const controlledFields = fields.map((field, index) => {
    return {
      ...field,
      ...watchFieldArray[index]
    };
  });

  return (
    <form>
      {controlledFields.map((field, index) => {
        return <input {...register(`fieldArray.${index}.name` as const)} />;
      })}
    </form>
  );
}

In my scenario I can notice an evident lag, every time the user types a character in an input linked to the fields.

Let's suppose my fieldArray looks something like:

{
  value1: string;
  value2: string;
  value3: string;
}

I'd like to watch only when value1 changes and not every possible value, in order to improve the user experience.

Is there a native way to do that?

In alternative it would be great to have a reload function I can safely run on the inputs linked to value1, like:

const { fields, append, reloadFields } = useFieldArray({

Thanks in advance