Getting current form state asynchronously

[mwalkerr]

I have a form with an array of entries. When the form is submitted, a request is made for each entry and I'd like to update the form with the success status of each request. The getValues function returned by useForm is bound to the form state at the time of the render when it was created, so using it asynchronously can return stale data. Here is an example showing my use case (code included at bottom):
https://codesandbox.io/s/react-hook-form-usefieldarray-forked-dcjv5?file=/src/index.js
I can get the desired behavior by sticking the form data in a ref that I update as each request completes, but then I'm managing the form state externally. Is there any way to get the current state of the form in an asynchronous fashion such as this?

const mockAPIRequest = (index) => {
  const p = new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(Math.random());
    }, 1000 + 500 * index);
  });
  return p;
};

function App() {
  const { register, control, handleSubmit, getValues, setValue } = useForm({
    defaultValues: {
      people: [
        { firstName: "Bill", status: "..." },
        { firstName: "Bill", status: "..." },
        { firstName: "Bill", status: "..." },
        { firstName: "Bill", status: "..." },
        { firstName: "Bill", status: "..." }
      ]
    }
  });
  const { fields } = useFieldArray({
    control,
    name: "people"
  });
  const hackyRef = useRef(null);

  const onSubmit = (data) => {
    data["people"].forEach((field, index) => {
      data.people[index].status = "...";
      mockAPIRequest(index).then((val) => {
        // If we get the list of people from getValues, the list is stale
        const people = getValues().people;
        // we can get the most recent value of "people" from the ref object but the
        // state no longer reflects the form state
        // const people = hackyRef.current

        people[index].status = val < 0.5 ? "✓" : "✗";
        hackyRef.current = people;
        setValue("people", people);
      });
    });
    hackyRef.current = data.people;
    setValue("people", data.people);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <ul>
        {fields.map((item, index) => {
          return (
            <li key={item.id}>
              <span style={{ color: "white", textAlign: "center" }}>
                {item.status}
              </span>
              <input
                name={`people[${index}].firstName`}
                defaultValue={`${item.firstName}`} // make sure to set up defaultValue
                ref={register()}
              />
            </li>
          );
        })}
      </ul>
      <input type="submit" />
    </form>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

[mwalkerr]

Ah, I was just misunderstanding how react-hook-form works. The state is always based on the input values from the DOM. Adding this worked:

<input
                type="hidden"
                ref={register()}
                name={`people[${index}].status`}
                defaultValue={item.status}
              />

https://codesandbox.io/s/react-hook-form-usefieldarray-forked-1b8ff?file=/src/index.js
That works but doesn't really seem ideal since it's just bouncing the status value off the DOM. Might be better to just track the status state separately from the people in the form state

[bluebill1049]

you can use shouldUnregister: false, however, that's how native form works and we try to get align with web standards.