form is not re-rendered when using setValue to update a field that was manually registered
See original GitHub issueDescribe the bug
When registering fields manually, the form does not re-render after calling setValue.
To Reproduce
const MyForm = () => {
const { register, unregister, getValues, setValue } = useForm({
defaultValues: { email: '' }
});
useEffect(() => {
register({ name: 'email' });
return () => unregister({ name: 'email' });
}, [register, unregister]);
/* getValues does not work because setValue does not trigger a re-render */
const values = getValues();
const onChange = e => setValue(e.target.name, e.target.value, true);
return <input type="text" name="email" value={values.email} onChange={onChange} />;
};
Expected behavior
Explicitly calling setValue should trigger a re-render
The usual use-case would be to simply pass register into the input’s ref. However, manually registering fields is still required for components that don’t expose a ref prop. The above code snippet is just a contrived example to show that manually registering a field does not work as intended.
Issue Analytics
- State:
- Created 4 years ago
- Reactions:21
- Comments:43 (33 by maintainers)
Top Results From Across the Web
How to trigger re-render with `setValue` using react-hook-form?
When I feed a new value, it works as intended. The problem (I guess) is the component is not re-rendered, so the old...
Read more >useForm - setValue - React Hook Form
This function allows you to dynamically set the value of a registered field and have the options to validate and update the form...
Read more >Form - Ant Design
High performance Form component with data scope management. Including data collection, verification, and styles.
Read more >React Hook Form - What's the point of setValue if it doesn't do ...
Note: Because ref has not been registered, React Hook Form won't be able to ... This means you will have to manually update...
Read more >React Hook Form - useForm: setValue - YouTube
This session cover setValue API inside react hook form.Doc: https://react-hook- form.com/api/useform/ setValue.
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
actually, that’s not the correct usage…
setValueshouldn’t trigger re-render unless there is an error for the field (react hook form is more towards uncontrolled component). for the controlled component, you should useuseStateandsetValue.setValueshould be used to update the uncontrolled components.For anyone who is registering fields manually like
Autocompletefrom Material UI + React Hook Form you can provide options as a 3rd argument of setValue method.It should work like this