Comments (4)
Pretty sure it's related to this:
useWatch's execution order matters, which means if you update a form value before the subscription is in place, then the value updated will be ignored.
https://react-hook-form.com/docs/usewatch
from react-hook-form.
I see. Using useFormValues
hook as suggested in the docs and getting type
from useFormValues
return value instead of accessing it using field
kind of works.
The problem is that old values still shows up for a moment, where they shouldn't.
Before:
const useFormValues = () => {
const { getValues } = useFormContext()
return {
...useWatch(), // subscribe to form value updates
...getValues(), // always merge with latest form values
}
}
// FormRow component
const FormRow = ({ index, field, isFromDragOverlay }) => {
return (
...
{field.type === 'student' && (
<GradeField index={index} isFromDragOverlay={isFromDragOverlay} />
)}
...
)
}
After:
const FormRow = ({ index }) => {
const values = useFormValues()
const type = values.people[index].type
return (
...
{type === 'student' && <GradeField index={index} />} // <--- no need to pass isFromDragOverlay now or disable watch if field is from drag overlay - it will just work now
...
)
}
from react-hook-form.
This PR may address this sort of issue #11522 as subscription can be established before react component.
from react-hook-form.
@bluebill1049 Can you explain how useFormValues()
works? Is this accurate?
useWatch()
will re-trigger at the hook level (instead of theuseForm()
root level likewatch()
), but it doesn't always have the most up-to-date value because the update might happen before the subscriptiongetValues()
will have the up-to-date values
Why does useFormValues()
return { ...useWatch(), ...getValues() }
? Why not just call useWatch()
to ensure that the function runs when the subscription changes, and then return getValues()
to get the latest values?
Is there any issues with doing something like this instead?
export function useWatchFormValues<
TFieldValues extends FieldValues = FieldValues,
TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
>(form: UseFormReturn<TFieldValues>, name: TFieldName) {
useWatch({ control: form.control, exact: true, name: name }); // subscribe to form value updates
const values = form.getValues(name);
return values;
}
from react-hook-form.
Related Issues (20)
- better error when FormProvider is missing HOT 2
- issue: formState.error is {} but formState.isValid is false
- issue: useFieldArray cut off null values from array and cause broken indexing next entities HOT 1
- issue: isDirty form state set to true even if i manually reset it
- issue: Zod refine error with objects
- issue: Problem with constraining an optional field HOT 5
- issue: dirtyFiedls type error HOT 1
- issue: SetState after submission results in stale data on render HOT 1
- issue: reset() and keepDirtyValues on dirty fields containing an array always resets the value
- issue: Duplicate fields after deleting. useFieldArray and react-query HOT 6
- issue: useController with array as value does not update useFieldArray linked to same field
- Feature Request: modeling different resolver input and output types HOT 2
- issue: Typo in docstring
- issue: Appending to a field array when there is a default value replaces the original value instead of actually appending
- issue: Type of changes from useFieldArray-Functions are `undefined` HOT 1
- issue: useController should subscribe to exact field name of form's state
- Feat: add a recursive depth limit to path (eager.d.ts) HOT 1
- issue: useFieldArray and Controller mix shows previous value HOT 1
- issue: remaining textarea value after reset HOT 1
- Unable to trigger validation inside of rules
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-hook-form.