From 33ea45d81d941d73be3db25fd6d0fa009d6a5630 Mon Sep 17 00:00:00 2001
From: Marco Pasqualetti <marco.pasqualetti@live.com>
Date: Fri, 13 Dec 2024 07:55:55 +0100
Subject: [PATCH] =?UTF-8?q?feat(useForm):=20add=20=E2=80=9C`useForm`=20ret?=
 =?UTF-8?q?urn=20and=20`useEffect`=20dependencies=E2=80=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/content/docs/useform.mdx | 47 +++++++++++++++++++++++++++++++++++-
 1 file changed, 46 insertions(+), 1 deletion(-)

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) => {
 
 </Admonition>
 
+#### `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.
+
+<Admonition type="warning" >
+
+The following code is likely to create this situation:
+
+```javascript
+const methods = useForm()
+
+useEffect(() => {
+  methods.reset({ ... })
+}, [methods])
+```
+
+</Admonition>
+
+Passing only the relevant methods, as showed below, should avoid this kind of issue:
+
+```javascript
+const methods = useForm()
+
+useEffect(() => {
+  methods.reset({ ... })
+}, [methods.reset]}
+```
+
+<Admonition type="tip" >
+
+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])
+```
+
+</Admonition>
+
+[More info can be found on this issue](https://github.com/react-hook-form/react-hook-form/issues/12463)
+
 #### Return
 
 ---