Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 03c3d5d

Browse files
feat(useForm): add "useForm return and useEffect dependencies" (react-hook-form#1097)
1 parent 410137a commit 03c3d5d

File tree

1 file changed

+46
-1
lines changed

1 file changed

+46
-1
lines changed

‎src/content/docs/useform.mdx‎

Lines changed: 46 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -173,7 +173,6 @@ useForm({
173173

174174
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`.
175175

176-
177176
```javascript copy
178177
// set default value sync
179178
function App({ values }) {
@@ -706,6 +705,52 @@ resolver: async (data, context, options) => {
706705

707706
</Admonition>
708707

708+
#### `useForm` return and `useEffect` dependencies
709+
710+
In a future major release, `useForm` return will be memoized to optimize performance and reflect changes in `formState`.
711+
As a result, adding the entire return value of `useForm` to a `useEffect` dependency list may lead to infinite loops.
712+
713+
<Admonition type="warning" >
714+
715+
The following code is likely to create this situation:
716+
717+
```javascript
718+
const methods = useForm()
719+
720+
useEffect(() => {
721+
methods.reset({ ... })
722+
}, [methods])
723+
```
724+
725+
</Admonition>
726+
727+
Passing only the relevant methods, as showed below, should avoid this kind of issue:
728+
729+
```javascript
730+
const methods = useForm()
731+
732+
useEffect(() => {
733+
methods.reset({ ... })
734+
}, [methods.reset]}
735+
```
736+
737+
<Admonition type="tip" >
738+
739+
The recommended way is to pass destructure the required methods and add them to the dependencies of an `useEffect`
740+
741+
```javascript
742+
743+
const { reset } = useForm()
744+
745+
useEffect(() => {
746+
reset({ ... })
747+
}, [reset])
748+
```
749+
750+
</Admonition>
751+
752+
[More info can be found on this issue](https://github.com/react-hook-form/react-hook-form/issues/12463)
753+
709754
#### Return
710755
711756
---

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /