form is not re-rendered when using setValue to update a field that was manually registered

See original GitHub issue

Describe 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:closed
  • Created 4 years ago
  • Reactions:21
  • Comments:43 (33 by maintainers)

github_iconTop GitHub Comments

27reactions
bluebill1049commented, Nov 4, 2019

actually, that’s not the correct usage… setValue shouldn’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 use useState and setValue.

setValue should be used to update the uncontrolled components.

23reactions
enheitcommented, Jul 5, 2021

For anyone who is registering fields manually like Autocomplete from Material UI + React Hook Form you can provide options as a 3rd argument of setValue method.

It should work like this


const { setValue } = useForm()

<Autocomplete
   ...
   onChange={event, option => setValue('fieldName', option.value, { shouldValidate: true }}
   ...
/>
Read more comments on GitHub >

github_iconTop 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 >

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