Maximum update depth exceeded error with setFieldValue in depn array of useEffect

[pallid jewel]

Hi @north mesa

I've noticed in the latest version of Mantine, some of my forms that had a setFieldValue in a useEffect dependency array are causing a maximum update depth exceeded error. I looked at the code when uncontrolled mode was introduced and there's a new rules dependency in the useCallback for setFieldValue

https://github.com/mantinedev/mantine/blame/master/packages/%40mantine/form/src/use-form.ts#L100

I have a zod resolver in the forms and if I move the entire definition of the validate function outside of the component, then it works fine. Was this rules dependency introduced on purpose?

[north mesa]

Do not add form.setFieldValue to the dependency array.

[pallid jewel]

It is destructured

[north mesa]

so?

[pallid jewel]

Wouldn’t it be safe to use since it’s wrapped in useCallback? I get it if you say that we should never use any of these form methods in a dependency array, but it’s tough when it breaks for a consumer with a minor upgrade. Maybe worth mentioning in the docs that we shouldn’t rely on any of those methods being stable

[north mesa]

I do not see a reason to put those methods in the dependency array in any case, memoized or not. Mantine guarantees that the functionality that is mentioned in the documentation and covered by unit tests works correctly across minor releases, everything else is your application code.

[pallid jewel]

No doubt about it, but I still think's it's worth mentioning in the docs given how common it is to have the eslint-plugin-react-hooks hooks in projects. In our team, we ask devs to leave a comment disabling that eslint rule when appropriate which sounds like it's the right thing to do in this case. Having it in the docs gives it a bit more visibility.