Mount issue on RHFInput

[ajay-dev-j]

Hello developers, am facing this issue. I am new to this repo.
I like to share the code without the UI library. Just an input is enough to replicate the issue. Once the component is re-rendered and then we try to update the input, we are getting a warning, which is ugly. Can anyone please help me with this.

Code snippet
<RHFInput
as={ }
defaultValue={getValues().email}
rules={
{
required: 'Email is required',
pattern : {
value: /^\w+([.-]?\w+)@\w+([.-]?\w+)(.\w{2,3})+$/,
message: 'Bad email'
}
}
}
name='email'
placeholder='Enter Email'
register={register}
setValue={setValue}
/>

Error on change after re-render,
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
in Unknown (at LoginComponent.js:70)
in div (created by FormGroup)
in FormGroup (at LoginComponent.js:68)
in form (created by Form)
in Form (at LoginComponent.js:67)

[bluebill1049]

was this issue caused during unmount? any chance i could have a codesandbox to reproduce?

[bluebill1049]

you want to upgrade the latest react hook form? see if that error goes away

[ajay-dev-j]

was this issue caused during unmount? any chance I could have a codesandbox to reproduce?

This happens when the props of the component changes, that is after a re-render. I can say setValue={setValue} is causing the issue.

[ajay-dev-j]

you want to upgrade the latest react hook form? see if that error goes away

Bump it just now. No help!! :(

[bluebill1049]

do you have a codesandbox for this particular issue?

[bluebill1049]

why as={}?

[ajay-dev-j]

why as={}?

Its a github bug. Its not showing the "input "

[bluebill1049]

oh why you are using this component with native input?

<input ref={register} name="test" /> for native one

[ajay-dev-j]

@bluebill1049 am clear now only after I prepare for a code sandbox. For example, I used native input, else am using reactstrap ui lib. Also, I found what the problem is. It's my mistake in my code. Nothing related to react hook form.
Problem code:
if(isFetching) return ()
return(

) ....

here if isFetching props is true, then RHFInput is unmounted, that caused the issue.
Thanks again @bluebill1049

[bluebill1049]

no worries mate @ajay-dev-j