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} ... />
...
}