Rerenders with useFieldArray and form.reset()

[AdrianMrn]

After I submit my form, I call form.reset(valuesFromApi) to set the new values as my defaultValues, and be able to set my dirty state, this works as expected. However, this is causing all my components that use useFieldArray to remount completely, which causes the internal keys of the items to be recalculated, and all the children to unmount and remount as well, which causes lost focus in input fields etc.

I have an autosave which runs every couple of seconds, which is why this loss of focus is such an issue for me. I'm currently working around it by disabling autosave when the user has focus in an input or textarea, but it doesn't feel correct having this, and quite fragile. Eg file inputs also suffer from this, and won't set the value properly if the item has remounted in the meantime.

I've used shouldUnregister: false, which doesn't fix my issue.

[mir0ir]

Also having this issue!

[frikkfelix]

+1

[KarlinskyS]

I faced a similar issue, but from a slightly different perspective. I was using useFieldArray, and part of my rendered values (specifically const { fields } = useFieldArray({ control, name: 'someSpecificForm' })) were tied to inputs managed separately via useState. When I called reset(), the input that wasn't tied to react-hook-form was also unexpectedly reset to its initial value.

After some investigation, I realized that reset() causes useFieldArray's mySuperField to unmount and remount components. This unmounting affects all child components, including those managed by useState, which explains why my input's state reverted to its initial value (null in my case) after the remount.

I hope this helps others facing similar issues!

small code snippet:

  const MyForm = () => {
  const { control, reset } = useForm({
    defaultValues: {
      items: [{ name: "Item 1" }, { name: "Item 2" }]
    }
  });

  // useFieldArray to dynamically render items
  const { fields } = useFieldArray({
    control,
    name: "items"
  });

  // A separate state-controlled input
  const [externalInput, setExternalInput] = useState("External State");

  const handleReset = () => {
    reset(); // This triggers unmount/remount of useFieldArray components
    // externalInput gets reset because of the remount cycle
  };

  return (
    <div>
      <button type="button" onClick={handleReset}>
        Reset Form
      </button>

      {/* useFieldArray renders dynamically */}
      {fields.map((field, index) => (
        <div key={field.id}>
          <input
            name={`items[${index}].name`}
            defaultValue={field.name}
          />
        </div>
      ))}

      {/* An input controlled by useState */}
      <input
        value={externalInput}
        onChange={(e) => setExternalInput(e.target.value)}
        placeholder="External Input"
      />
    </div>
  );
};