How to Update react-hook-form Controller Values Dynamically with reset()

Learn why `react-hook-form` Controllers don't automatically update with new defaultValues and how to use the reset() function in a useEffect to reflect dynamic data changes correctly.
---
This video is based on the question https://stackoverflow.com/q/79412943/ asked by the user 'J.Cart' ( https://stackoverflow.com/u/5270135/ ) and on the answer https://stackoverflow.com/a/79412985/ provided by the user 'J.Cart' ( https://stackoverflow.com/u/5270135/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: React Hook Form Controller Not Showing Updated Value

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to drop me a comment under this video.
---
Problem Overview

When using react-hook-form to display data dynamically—such as showing item details in a popup—updating the form fields when switching between items can be tricky.

For example, selecting Item A correctly shows its data, but switching to Item B does not update the form fields; they still show Item A's details.

Why This Happens

The defaultValues option in useForm is only used during the initial render. Updating the defaultValues later does not automatically update the Controller fields.

This means your form will continue showing old data unless you manually update the form state.

The Right Solution: Use reset()

To update form values dynamically when your source data (like the selected item) changes, call the reset() method from react-hook-form. This will replace the form values with the new data.

Step-by-Step:

Initialize the form with useForm. You can provide initial default values, but know they won't update automatically:

[[See Video to Reveal this Text or Code Snippet]]

Use a useEffect hook to watch for changes in the item and call reset():

[[See Video to Reveal this Text or Code Snippet]]

Render your Controller normally. It will now have updated values:

[[See Video to Reveal this Text or Code Snippet]]

Summary

defaultValues are static after initial render.

Use reset() when your form data source changes.

Calling reset() updates all form values, and Controller fields will reflect those changes.

This approach ensures your form always stays in sync with dynamic data like popups showing different item details.