[v7] Issues when using with Redux slices

[oltodo]

I meet Cannot assign to read only property ... issues when I use React Hook Form with Redux Toolkit's slices. The latter uses Immer under the hood which freezes the state to protect it against accidental modifications outside of a producer.

Firstly, I haven't been able to directly provide the result of useSelector to useForm's defaultValues option. So I had have to use the Lodash's cloneDeep function to fix that issue appearing at form initialization:

const foobar = useSelector((state) => state.foobar);

const { reset } = useForm({
  defaultValues: cloneDeep(foobar)
});

After that, I've still been meeting that issue after form submitting. I've been able to reproduce it in a basic example:

https://codesandbox.io/s/react-hook-form-cannot-assign-to-read-only-property-ip14f

(Just add a media by clicking on ADD A MOVIE or ADD A SONG buttons, then click on SAVE button)

Any idea?

[leapful]

@oltodo

The root cause is from line 72 where form data is persisted in Redux store, it will transform the object to immutable object but this object is used by react-hook-form to get and set value on ref.

Cloning form data before persisting it to Redux store will fix the issue.

Working sample: https://codesandbox.io/s/react-hook-form-cannot-assign-to-read-only-property-forked-nqkk7

[bluebill1049]

thank you @leapful 🙏

[oltodo]

Works fine. Thanks @leapful!