Does React Hook Form reduce rerenders when used with Conrolled Components like MUI TextField

[dakshsaraf]

As seen in the above picture react hooks form greatly reduces the rerenders and performs much better than formik. But when used with controlled components from UI libraries like material UI, would it still reduce rerenders and or rerender on every input change like Formik?

[bluebill1049]

Yes! totally!

https://react-hook-form.com/api#Controller

https://codesandbox.io/s/react-hook-form-v6-controller-qsd8r

[dakshsaraf]

There are two bugs to my examples.
Formik: The count is not increasing
React-Hook-Form: if the email field is not validated rerenders happen at every inputchange for the username field, why is that the case?

[bluebill1049]

formik

        count++;
        console.log("rendering.." + count);

hook form: i am not sure why you get re-render, it should only trigger correct the input.

[bluebill1049]

[dakshsaraf]

Yes I refreshed it and it started working, do not know why that was happening before. Thanks so much for taking out so much time to help me

[dakshsaraf]

I am shifting my project from formik to react-hook-form. I had a multistep form in formik with over 100+ fields that was too slow despite using FastField. I am certain react-hook-form would solve the performance issue. Great Library