diff --git a/src/content/docs/useform.mdx b/src/content/docs/useform.mdx index 95578a5b1..7981e9c1a 100644 --- a/src/content/docs/useform.mdx +++ b/src/content/docs/useform.mdx @@ -173,7 +173,6 @@ useForm({ The `values` prop will react to changes and update the form values, which is useful when your form needs to be updated by external state or server data. The `values` prop will overwrite the `defaultValues` prop, unless `resetOptions: { keepDefaultValues: true }` is also set for `useForm`. - ```javascript copy // set default value sync function App({ values }) { @@ -706,6 +705,52 @@ resolver: async (data, context, options) => { +#### `useForm` return and `useEffect` dependencies + +In a future major release, `useForm` return will be memoized to optimize performance and reflect changes in `formState`. +As a result, adding the entire return value of `useForm` to a `useEffect` dependency list may lead to infinite loops. + + + +The following code is likely to create this situation: + +```javascript +const methods = useForm() + +useEffect(() => { + methods.reset({ ... }) +}, [methods]) +``` + + + +Passing only the relevant methods, as showed below, should avoid this kind of issue: + +```javascript +const methods = useForm() + +useEffect(() => { + methods.reset({ ... }) +}, [methods.reset]} +``` + + + +The recommended way is to pass destructure the required methods and add them to the dependencies of an `useEffect` + +```javascript + +const { reset } = useForm() + +useEffect(() => { + reset({ ... }) +}, [reset]) +``` + + + +[More info can be found on this issue](https://github.com/react-hook-form/react-hook-form/issues/12463) + #### Return ---