-
-
Notifications
You must be signed in to change notification settings - Fork 481
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Validations run on unmount creating unnecessary requests #408
Comments
Hmm... I wonder if unmounting the form needs to pause validation like mounting the form does. I also wonder what order the Great reporting, @rosskevin! |
EDIT: it looks like the infinite loop I ran into (described below) may not be an RFF bug after all, but instead may be a bug in react-router that will be fixed in react-router version 5.0.1. See remix-run/react-router#6673 for the problem and remix-run/react-router#6674 and remix-run/react-router#6690 for the fixes. I'll update this issue if I can repro it on top of the fixed react-router version. But even if this infinite loop isn't RFF's fault doesn't mean that running validation on unmount is a good idea! ;-) I also have a form within a dialog, and I'm also seeing problems when unmounting, except in my case it's worse: an infinite loop. I'm getting the dreaded The full error message from React is this: To answer your question above: I don't see why a form should need to run validation when it's unmounting! Even if it didn't cause an infinite loop, some validations can have non-trivial cost, and if the form is unmounting then why would validation be needed? Also, out of curiosity what is that Here's the setState call that triggers the problem: react-final-form/src/ReactFinalForm.js Lines 82 to 106 in 4e72442
If it matters, here's some details about how I'm using RFF:
return done ? (
<Redirect to={'/times'} />
) : (
<>
<Form
onSubmit={async (values) => onSubmit(values)}
initialValues={initialValues}
render={({ handleSubmit, pristine, invalid }) => {
return (
<form onSubmit={handleSubmit}
<FieldContainer>
<FieldLabel>Date:</FieldLabel>
<Field name="date" validate={isDateObjectOrStringValid}>
{({ input, meta }) => (
<>
<DatePickerAdapter {...input} />
{meta.error && meta.touched && <span style={{ color: 'red' }}>{meta.error}</span>}
</>
)}
</Field>
</FieldContainer>
{/* omitted three form fields to keep this excerpt short */}
<FieldContainer>
<Button type="submit" disabled={pristine || invalid}>Save</Button>
<Button onClick={() => setDone(true)}>Cancel</Button>
</FieldContainer>
</form>
); Here's most of the call stack except the bottom few frames which are probably not relevant: Here's another view of the call stack, including the "component stack": |
I also ran into this bug, since we do cryptographic options to validate a form, when a form is unmounted (even post-submission), the unregistrations cause validation to run once for every field that was unmounted (including My solution is: import { useEffect } from 'react';
import { useForm } from 'react-final-form';
/**
* pauses validation when it becomes unmounted
*
* NOTE: this is useful because for some reason, final-form will
* re-run validation when a field is unregistered (even post submission !?),
* which react-final-form does on unmount. So when we redirect away from
* a page with a form on it, all of the validation is re-triggered.
*
* Normally, for boring sync-validation-only situations, this is ok, but for
* long-running validators like ours (deriving seeds, checking chain, etc)
* having them re-triggered when a form leaves the page is hilariously bad.
*
* So here we disable validation when unmounting, saving ourselves
* from the footgun.
*/
export default function ValidationPauser() {
const form = useForm();
useEffect(() => () => form.pauseValidation(), [form]);
return null;
} which should be placed as the first component within a |
Worked like magic! |
Published fix in |
Are you submitting a bug report or a feature request?
Bug
What is the current behavior?
When leaving a form that is embedded in a dialog, the form is unmounted which in turn calls unsubscribe and ultimately that runs field validations. In the case a user cancels on a complex form with server side validations, it creates a noticeable slowdown of ui as well as unnecessary requests to the server.
What is the expected behavior?
Unmount will avoid unnecessary work.
Sandbox Link
Reproduction based on the
Synchronous field-level validation
https://codesandbox.io/s/pw19j1x52mUnmount form
What's your environment?
Sandbox updated to latest.
ff: 4.11.0
rff: 4.0.2
Other information
possibly related #336
The text was updated successfully, but these errors were encountered: