useFormState in conditionally rendered components get outdated values

[h4emp3]

Version Number

7.47.0

Codesandbox/Expo snack

https://codesandbox.io/s/react-hook-form-stale-state-57fvhz

Steps to reproduce

1. Open the linked codesandbox
2. Enter one character into the input field
3. See how the submit button appears, but is disabled, even though the input is clearly dirty

After changing anything else in the form state (e.g. entering a second character) the isDirty state gets updated to the correct value.

Expected behaviour

The submit button should be visible and enabled at the same time.

What browsers are you seeing the problem on?

Firefox, Chrome

Relevant log output

No response

Code of Conduct

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

[bluebill1049]

you should have subscribed to the isDirty in the upper useFormState.

[h4emp3]

Yes, I realize, this "fixes" the issue. My linked example was the minimal repro of the issue and the real situation is a little bit more involved where it is quite burdensome to register to the same state in the upper component and it is really error prone to have to think of that. Sometimes both components are in completely different parts of the code base and both places get easily out of sync.

Is there a reason why this works the way it does? Should it? ;)

[stephan-noel]

I just ran into this as well. It's very error prone. I might be wrong but I think there is no way to fix this as it just seems like a special case of the following behavior that's called out in the docs :

// ❌ formState.isValid is accessed conditionally,

// so the Proxy does not subscribe to changes of that state
return <button disabled={!formState.isDirty || !formState.isValid} />;

// ✅ read all formState values to subscribe to changes
const { isDirty, isValid } = formState;
return <button disabled={!isDirty || !isValid} />;

https://react-hook-form.com/docs/useform/formstate

I do think conditionally rendering components should be explicitly called out since it's not obvious and conditional rendering causing this is really "spooky action at a distance".