I'm using react-hook-form
in my React project and I need to perform some actions when the form is reset.
However, I can't find a way to listen to the form's reset event and since I'm inside the child I don't have direct access to the reset button event.
In this case I wanted to reset the check state that is not in the values to submit
Here is a simplified version of my form setup:
import { useState } from 'react';
import { FormProvider, useForm, useFormContext } from 'react-hook-form';
const initialValues = { firstName: "empty", lastName: "empty" };
function MyForm() {
const methods = useForm({ defaultValues: { ...initialValues } });
const onSubmit = data => {
console.log(data);
};
return (
<FormProvider {...methods}>
<CustomContent />
<button type="button" onClick={methods.handleSubmit(onSubmit)}>Submit</button>
<button type="button" onClick={() => methods.reset({ ...initialValues })}>Reset</button>
</FormProvider >
);
}
function CustomContent() {
const { register } = useFormContext();
const [isChecked, setIsChecked] = useState(false);
return (
<div>
<input {...register('firstName')} placeholder="First Name" />
<input {...register('lastName')} placeholder="Last Name" />
<label >
<input type="checkbox" checked={isChecked} onChange={() => setIsChecked((prev) => !prev)} />
<span>Check me</span>
</label>
</div>
);
}
export default MyForm;
Is there an event, callback, or hook in react-hook-form that allows me to listen specifically to the form reset action so that I can perform additional tasks (like resetting other states or triggering side effects or changing fields not saved in the form)?
I tried the solution proposed here Is there a way to listen to a form reset? - React Hook Form.
useEffect(() => {
if (isFirstRender.current) {
isFirstRender.current = false;
return;
}
if (!isSubmitted && !isDirty) {
setIsChecked(false);
}
}, [isDirty]);
But it didn't work because it only works if you change a field that has been registered and it doesn't work for this case.
Any guidance or suggestions would be appreciated. Thank you!
As I'm doing this code: methods.reset({ ...initialValues })
, the defaultValues variable is set again.
So the solution is to make the useEffect of this variable and then listen when the defaultValues variable changes, i.e. in my case, when the Reset button is clicked.
In other words, (inside of CustomContent):
const { isSubmitted, isSubmitting, defaultValues, isLoading } = useFormState();
useEffect(() => {
if (isFirstRender.current) {
isFirstRender.current = false;
return;
}
if (!isSubmitted && !isSubmitting && !isLoading) {
setIsChecked(false);
}
}, [defaultValues]);
It's not the perfect solution, but it works for this case.