you will need to use defaultValue for input for useFieldArray. especially when you delete, shuffle and swap inputs.

[kayuapi]

you will need to use defaultValue for input for useFieldArray. especially when you delete, shuffle and swap inputs.

Originally posted by @bluebill1049 in #1529 (comment)

Hi, with regards to this, is there a way so that I can use reset method returned from useForm hook to change the fields returned from useFieldArray hook? From my understanding, useFieldArray takes in control method returned from useFrom hook and parse it to return the fields. However, when I call the reset with useEffect, I am facing issues making the useFieldArray's control parameter to update. My goal is to obtain a new set of fields from useFieldArray when the useForm's defaultValue parameter is updated.

Thank you!

[bluebill1049]

please provide a simple codesandbox for your question.

[kayuapi]

In not working version line 32 to line 34, I used reset api at useEffect, but from line 35 to line 38, I cannot make fields to have the resetted default values

[bluebill1049]

why not working on top of the working version? and add a useEffect with reset?

[kayuapi]

  const [receivedItems, setReceivedItems] = useState([]);

  useEffect(() => {
    setTimeout(() => {
      setReceivedItems([{ id: 0, name: "nature5" }]);
    }, 1000);
  }, []);
  useEffect(() => {
    reset({ defaultValues: { items: receivedItems } });
  }, [receivedItems, reset]);

Added this to the working version and the fields api from useFieldArray are not updated to the new default values, the fields just disappeared

[bluebill1049]

why is this added? setReceivedItems([{ id: 0, name: "nature5" }]);

useEffect(() => {
    // pass your data here
    reset({
      items: [] // not defaultValues
    });
  }, [yourItem, reset]);

please invest some time with the doc, there are examples there as well to help you understand useFieldArray and other APIs.

https://react-hook-form.com/api#reset
https://react-hook-form.com/api#useFieldArray

[kayuapi]

It's a mock to simulate a set local component state action upon receiving a promise.
Thank you! It works!