From 45f3166ce647a43aa3177c1cc19c7ee9c416281e Mon Sep 17 00:00:00 2001 From: Asa Zernik Date: Sat, 17 Aug 2019 04:04:12 -0700 Subject: [PATCH 1/2] no-op, ReactFinalForm.js: More commenting for pause/resumeValidation() on init --- src/ReactFinalForm.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/ReactFinalForm.js b/src/ReactFinalForm.js index 7e2f7109..7a6f6865 100644 --- a/src/ReactFinalForm.js +++ b/src/ReactFinalForm.js @@ -67,6 +67,7 @@ function ReactFinalForm({ const form: FormApi = useConstant(() => { const f = alternateFormApi || createForm(config) + // pause validation until children register all fields on first render (unpaused in useEffect() below) f.pauseValidation() return f }) @@ -87,7 +88,7 @@ function ReactFinalForm({ const stateRef = useLatest>(state) React.useEffect(() => { - // We have rendered, so all fields are no registered, so we can unpause validation + // We have rendered, so all fields are now registered, so we can unpause validation form.isValidationPaused() && form.resumeValidation() const unsubscriptions: Unsubscribe[] = [ form.subscribe(s => { From 85bc117610465beb3613c96431c922deaefa0149 Mon Sep 17 00:00:00 2001 From: Asa Zernik Date: Sat, 17 Aug 2019 04:08:14 -0700 Subject: [PATCH 2/2] ReactFinalForm.js: Pause validation before unmount This was causing serious performance problems on large forms, since validation is generally O(number_fields), and we'd be calling it number_fields times when running all the deregistrations. --- src/ReactFinalForm.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/ReactFinalForm.js b/src/ReactFinalForm.js index 7a6f6865..732f4cd5 100644 --- a/src/ReactFinalForm.js +++ b/src/ReactFinalForm.js @@ -106,7 +106,9 @@ function ReactFinalForm({ ] return () => { + form.pauseValidation() // pause validation so we don't revalidate on every field deregistration unsubscriptions.forEach(unsubscribe => unsubscribe()) + // don't need to resume validation here; either unmounting, or will re-run this hook with new deps } // eslint-disable-next-line react-hooks/exhaustive-deps }, [decorators])