Re-render component after file upload using react-hook-form

Viewed 804

In my application I have

1.main component, which renders a list of items
2.button for add new item -> 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 => and in onChange method I set the file path to second input field

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:

const SomeComponent = (props: SomeComponentProps): ReactElement<SomeComponentProps> => {
   const {register, handleSubmit} = useForm();
   const inputFile = useRef<HTMLInputElement>(null);

   const handleIconClick = (): void => {
     if(inputFile.current) {
        inputFile.current.click();
   }};

   <form onSubmit={onSubmit}>

        <input name="name"

               ref={register} />
        <input name="path"
               ref={register}

        // Hidden field for file upload
        <input type="file"
               
               ref={inputFile}
               
               style={{display: 'none'}}
               
               onChange={({target: { value }}:ChangeEvent<HTMLInputElement>): void => setValue('path', value)}
   </form>
    
         ...
   <Icon onClick={handleIconClick} ... />

         ...
}
0 Answers
Related