Validations run on unmount creating unnecessary requests

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/pw19j1x52m

1. allow to render initially
2. clear console
3. click Unmount form
4. observe validations firing by added console logs

What’s your environment?

Sandbox updated to latest. ff: 4.11.0 rff: 4.0.2

Other information

possibly related #336

[shrugs]

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 useField hooks that are only subscribing to state).

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 Form’s children.

[erikras]

Published fix in v6.3.1.