title: React hook form Rendering too many times
body: <p>I am trying to do something like this.
  When user Click on Edit Button then Form fields will appear and user can edit the data. otherwise user can only view the data.
  I facing the trouble, when user don't want to edit the form and click on cancel button then page start rendering as many times as the page have total form fields.</p>
  <p>On my original form I have 80+ form fields and when user click on cancel button page becomes very slow.</p>
  <p>When I remove
  ref={register}
  from my page then form don't render to many times, but form does not submit with the data.
  Is there any way to stop extra rendering?
  Here is my code and logic.</p>
  <p>Thanks for your attention.</p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  
  import { useForm } from &quot;react-hook-form&quot;;
  
  function Test() {
     const { register, handleSubmit } = useForm();
     const [edit, setEdit] = useState(false);
     const onSubmit = (data) =&gt; {
     console.log(data);
  };
  return (
  &lt;div className=&quot;App&quot;&gt;
    &lt;header className=&quot;App-header&quot;&gt;
      {console.log(&quot;I am redering.&quot;)}
      &lt;form onSubmit={handleSubmit(onSubmit)}&gt;
        &lt;a
          href=&quot;&quot;
          onClick={(e) =&gt; {
            setEdit(!edit);
            e.preventDefault();
          }}
        &gt;
          {edit ? &quot;Cancel&quot; : &quot;Edit&quot;}
        &lt;/a&gt;
        {edit &amp;&amp; (
          &lt;p&gt;
            &lt;input
              type=&quot;text&quot;
              name=&quot;email&quot;
              ref={register}
              placeholder=&quot;Email&quot;
            /&gt;
          &lt;/p&gt;
        )}
        {edit &amp;&amp; (
          &lt;p&gt;
            &lt;input
              type=&quot;text&quot;
              name=&quot;firstname&quot;
              ref={register}
              placeholder=&quot;First Name&quot;
            /&gt;
          &lt;/p&gt;
        )}
        {edit &amp;&amp; (
          &lt;p&gt;
            &lt;input
              type=&quot;text&quot;
              name=&quot;lastname&quot;
              ref={register}
              placeholder=&quot;Last Name&quot;
            /&gt;
          &lt;/p&gt;
        )}
        {edit &amp;&amp; (
          &lt;&gt;
            &lt;input
              type=&quot;checkbox&quot;
              name=&quot;contact[]&quot;
              id=&quot;contact-one&quot;
              value=&quot;1&quot;
              ref={register}
            /&gt;
            &lt;label htmlFor=&quot;contact-one&quot;&gt;One&lt;/label&gt;
          &lt;/&gt;
        )}
  
        {edit &amp;&amp; (
          &lt;&gt;
            &lt;input
              type=&quot;checkbox&quot;
              name=&quot;contact[]&quot;
              id=&quot;contact-two&quot;
              value=&quot;2&quot;
              ref={register}
            /&gt;
            &lt;label htmlFor=&quot;contact-two&quot;&gt;Two&lt;/label&gt;
          &lt;/&gt;
        )}
  
        {edit &amp;&amp; &lt;button type=&quot;submit&quot;&gt;Submit&lt;/button&gt;}
        {edit === false &amp;&amp; (
          &lt;&gt;
            &lt;p&gt;{`My First Name`}&lt;/p&gt;
            &lt;p&gt;{`My Last Name`}&lt;/p&gt;
            &lt;p&gt;{`My Email address`}&lt;/p&gt;
            &lt;p&gt;{`My Contacts`}&lt;/p&gt;
          &lt;/&gt;
        )}
      &lt;/form&gt;
      &lt;a
        className=&quot;App-link&quot;
        href=&quot;https://reactjs.org&quot;
        target=&quot;_blank&quot;
        rel=&quot;noopener noreferrer&quot;
      &gt;
        Learn React
      &lt;/a&gt;
    &lt;/header&gt;
    &lt;/div&gt;
   );
  }
  
  export default Test;
  </code></pre>