title: Re-render component after file upload using react-hook-form
body: <p>In my application I have</p>
  <pre><code>1.main component, which renders a list of items
  2.button for add new item -&gt; clicking the button opens modal with form, made with react-hook-forms (useForm)
  3.this very simple form contains 2 input field - second field with folder icon for file upload
  4.for file upload I have hidden input field =&gt; and in onChange method I set the file path to second input field
  </code></pre>
  <p>The thing is...when I choose the file my main component is re-renders. I wonder, how I can prevent this behavior. If you know, how to avoid it  - please, share your thoughts.
  My code:</p>
  <pre><code>const SomeComponent = (props: SomeComponentProps): ReactElement&lt;SomeComponentProps&gt; =&gt; {
     const {register, handleSubmit} = useForm();
     const inputFile = useRef&lt;HTMLInputElement&gt;(null);
  
     const handleIconClick = (): void =&gt; {
       if(inputFile.current) {
          inputFile.current.click();
     }};
  
     &lt;form onSubmit={onSubmit}&gt; 
          &lt;input name=&quot;name&quot; 
                 ref={register} /&gt;
          &lt;input name=&quot;path&quot;
                 ref={register}
  
          // Hidden field for file upload
          &lt;input type=&quot;file&quot;                
                 ref={inputFile}                
                 style={{display: 'none'}}                
                 onChange={({target: { value }}:ChangeEvent&lt;HTMLInputElement&gt;): void =&gt; setValue('path', value)}
     &lt;/form&gt;
      
           ...
     &lt;Icon onClick={handleIconClick} ... /&gt;
  
           ...
  }
  </code></pre>