question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

V6: useWatch not able to get value of existing form on render

See original GitHub issue

Describe the bug When using useWatch it doesn’t work on first render of a component, even if the form already has content from the user inputting. I know that the documentation states that useWatch and watch do not work on first render, but according to docs it’s because register has not run yet. In this case it has.

To Reproduce Steps to reproduce the behavior:

  1. Go to https://codesandbox.io/s/react-hook-form-form-context-forked-kpufy?file=/src/index.js
  2. Enter some data into the Test input field
  3. Click the “Show conditional”
  4. See that it shows no watched error
  5. Enter some more data into Test input field
  6. See that now it shows the data

Codesandbox link (Required)

https://codesandbox.io/s/react-hook-form-form-context-forked-kpufy?file=/src/index.js

Expected behavior I expect watched value to be whatever I’ve inputted into the test field before showing the conditional component

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:9 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
bjarkehscommented, Apr 13, 2021

It does. I think I’ll go with this approach until we can upgrade. Thanks.

1reaction
bjarkehscommented, Apr 13, 2021

Thank you! I had not considered using defaultValue for this.

Read more comments on GitHub >

github_iconTop Results From Across the Web

v6 useWatch nested fields feature suggestions / queries ...
Here are a few situations that have caught me out: useWatch doesn't get the initial value from the form, it just returns the...
Read more >
useForm - watch - Simple React forms validation
This method will watch specified inputs and return their values. It is useful to render input value and for determining what to render...
Read more >
React Hook Form useWatch not displaying correct value in ...
For anyone that may have this issue, I was able to fix it by using setValues to initially set the value on render...
Read more >
React Hook Form - Dependent Fields Using Watch - YouTube
How to implement dependent fields using react hook form. ... try restarting your device. Your browser can't play this video.
Read more >
Turn Anything Into A Form Field With React Hook Form ...
Here we see the two props required to make our field component work with the Controller: value - It should show the current...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found