issue: reset Field Array in combination with shouldUnregister: true at useForm level and Controller doesn't give correct submission data

[dwiyatci]

Version Number

7.45.0

Codesandbox/Expo snack

https://codesandbox.io/s/react-hook-form-reset-usefieldarray-forked-n3xksj

Steps to reproduce

1. Click on 'Submit'
2. See submission data

Expected behaviour

The submission data should be the reset values: { names: [{ firstName: 'Glenn' }, { firstName: 'Ania' }] } instead of the default values: { names: [{ firstName: 'John' }, { firstName: 'Glenn' }] }.

What browsers are you seeing the problem on?

Chrome

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[bluebill1049]

There are multiple unregister occurred and I did try to look into this, it gets more complex as I dig deeper. eg

• reset called with updated value
• then value gets overwrite by component unmount and remount at useFieldarray

workaround use unregister at your app and remove shouldUnregister: true, this prop would most likely to be deprecated in the next major version.

[dwiyatci]

@bluebill1049 Thank you for the quick patch (as usual :-))! ⚡🩹

use unregister at your app and remove shouldUnregister: true, this prop would most likely to be deprecated in the next major version

Uff, not so encouraging news this. 😬 Didn't it get loads of pushbacks from the community back then when moving from V6 to V7? I guess I still can also recall that our code didn't work properly anymore when not using shouldUnregister: true without really knowing the reason why 🤷🏻‍♂️

But anyway, looking ahead, since we're using this small wrapper (custom hook) in our code along with <RenderFunction> instead of <Controller> because of a "historical reason":

const RenderFunction = ({ children }) => children();

function useControllerField({ name, control, rules, defaultValue }) {
  const controller = useController({
    name,
    control,
    rules,
    defaultValue
  });

  return controller.field;
}

...would it work well if I also put unregister in that custom hook so that it can be used all over our code base by just passing the unregister function from the form context?

function useControllerField({ name, control, rules, defaultValue, unregister }) {
  const controller = useController({
    name,
    control,
    rules,
    defaultValue
  });

  useEffect(() => {
    return () => {
      unregister(name);
    };
  }, []);

  return controller.field;
}

I created a bit of experiment here (just try to play around with the "Submit" and "Toggle displayed" buttons):
https://codesandbox.io/s/rhf-issues-10585-forked-ftzy9k