setValue with shouldDirty does not work with useFormContext

[markedwards]

Version Number

7.43.1

Codesandbox/Expo snack

https://codesandbox.io/s/react-hook-form-v7-form-context-forked-r4r72m?file=/src/Test.js

Steps to reproduce

1. Call setValue() with shouldDirty: true from useFormContext.
2. See that the form does not become dirty.

Expected behaviour

shouldDirty should work when calling setValue from useFormContext, the same as it does directly from useForm.

What browsers are you seeing the problem on?

No response

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[markedwards]

This issue was raised in #72 but ignored there.

[leapful]

@markedwards

Please read carefully the documentation here: https://react-hook-form.com/api/useform/setvalue

Method setValue with option shouldDirty only applies at field level, not entire form level. You can use the method getFieldState of latest react-hook-form version to get isDirty flag for this case.

Example: https://codesandbox.io/s/react-hook-form-v7-form-context-forked-ppqznj?file=/src/Test.js

[markedwards]

Okay, but I need the whole form to become dirty, not just the field.

This works as expected when setValue is called from useForm. Why is the behavior different in useFormContext?

[markedwards]

The documentation states that shouldDirty dictates “ Whether to compute if your entire form is dirty or not against your defaultValues (subscribed to isDirty).”

Is there somewhere that states this is only true for useForm and not useFormContext?

[leapful]

@markedwards

Actually, the problem is not form useFormContext but from the order of React rendering between parent - child component.

The formState and fieldState is built as proxy object to avoid re-rendering, if you want the parent component to watch on the field level, setValue must be called after proxy object is done on registering change listener of field level.

A workaround is using setTimeout with setValue method inside useEffect of field level component

Updated example: https://codesandbox.io/s/react-hook-form-v7-form-context-forked-ppqznj?file=/src/Test.js

[markedwards]

I see, that makes sense. I can confirm this workaround does the job on my end as well. It feels slightly hacky, but I suppose it should be stable.

Thanks for the assist. Might be worth adding a note on this to documentation, because this is non-obvious.

[farook-heroes]

As For this Question's Answer , In form state , we use formState :{ isReady} prop to confirm the formstate subscription is completed,

Use Asyncrously to validate the state.