react-hook-form: issue: Uncontrolled inputs: Memoized component inputs not updating through Reset(reset from useForm)

Version Number

7.24.2

Codesandbox/Expo snack

https://codesandbox.io/s/provider-perf-forked-6lyw9?file=/src/App.js

Steps to reproduce

I actually forked https://react-hook-form.com/advanced-usage#FormProviderPerformance, with a few modifications.

  1. Make sure the codesandbox virtual browser is refreshed
  2. Click on “reset” button
  3. input registered as “immediateInput” is successfully reset
  4. input registered as “test”(memoized input component) is on default state

Expected behaviour

  • “Test” input(memoized) should update after the reset. image

  • Notice if we set shouldUnregister to true then click reset, it will show “Test” input is not registered anymore. image

  • Other things to note, after clicking “reset” button, when editing the “immediateInput” input field through typing, it will now show the updated value of “test” input. Even if we set shouldUnregister to true , “test” input will still update as long as we type on “immediateInput” input, but nothing will happen if we edit first the “test” input field after clicking “reset” button.

I was stuck with this issue for a few days now, tried reading the docs related to the issue several times, I still can’t find an answer, that’s why I decided to post an issue. I might be missing something.

What browsers are you seeing the problem on?

Chrome

Relevant log output

No response

Code of Conduct

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

About this issue

  • Original URL
  • State: closed
  • Created 2 years ago
  • Comments: 17 (8 by maintainers)

Most upvoted comments

Use prevProps.formState.isDirty && nextProps.formState.isDirty instead of prevProps.formState.isDirty === nextProps.formState.isDirty

as what @bluebill1049 have said

ok here is the reason behind this issue.

Here are the steps:

  • invoke reset all input references and form values will be removed
  • then we will update input values
  • however, the memoed component never received another render/state update, hence input references remain unknown and empty, hence input value can’t be updated.

Solutions

  • Make sure the component gets re-render after the reset and pay attention to the memo props to compare
  • use setValue instead of reset, so the reference will still be retained.

@Peter-AMD I will looking into it after work today.

Thanks @bluebill1049 , yodabest.