From f8c31f1f535d4cbe76414518242ab3b8963283bc Mon Sep 17 00:00:00 2001
From: Welly Shen <hivoid19@gmail.com>
Date: Tue, 10 Nov 2020 11:00:18 +0800
Subject: [PATCH] perf(useForm): remove setFieldTouchedIfNeeded() to reduce
 bundle size

---
 .changeset/five-phones-grab.md   |  5 +++++
 examples/src/BasicForm/index.tsx |  8 +++----
 src/useForm.ts                   | 36 ++++++++++++++++++--------------
 3 files changed, 29 insertions(+), 20 deletions(-)
 create mode 100644 .changeset/five-phones-grab.md

diff --git a/.changeset/five-phones-grab.md b/.changeset/five-phones-grab.md
new file mode 100644
index 00000000..92a3e366
--- /dev/null
+++ b/.changeset/five-phones-grab.md
@@ -0,0 +1,5 @@
+---
+"react-cool-form": patch
+---
+
+perf(useForm): remove setFieldTouchedIfNeeded() to reduce bundle size
diff --git a/examples/src/BasicForm/index.tsx b/examples/src/BasicForm/index.tsx
index 634e6653..65732b72 100644
--- a/examples/src/BasicForm/index.tsx
+++ b/examples/src/BasicForm/index.tsx
@@ -72,8 +72,8 @@ export default (): JSX.Element => {
   } = useForm<FormValues>({
     initialValues,
     // validateOnChange: false,
-    // validateOnBlur: false,
-    ignoreFields: ["text.nest", "number"],
+    validateOnBlur: false,
+    // ignoreFields: ["text.nest", "number"],
     // validate: async (values, set) => {
     //   let errors: any = { text: { nest: "" } };
 
@@ -203,11 +203,11 @@ export default (): JSX.Element => {
         <Input
           label="Text:"
           name="text.nest"
-          /* ref={validate(async (value) => {
+          ref={validate(async (value) => {
             // eslint-disable-next-line
             // await new Promise((resolve) => setTimeout(resolve, 1000));
             return value.length <= 5 ? "Field error" : "";
-          })} */
+          })}
           // data-rcf-ignore
         />
         <Controller
diff --git a/src/useForm.ts b/src/useForm.ts
index 4682a84d..f6060559 100644
--- a/src/useForm.ts
+++ b/src/useForm.ts
@@ -327,18 +327,6 @@ const useForm = <V extends FormValues = FormValues>({
     [setStateRef, validateFormWithLowPriority, validateOnBlur]
   );
 
-  const setFieldTouchedIfNeeded = useCallback(
-    (name: string) =>
-      setFieldTouched(
-        name,
-        (validateOnBlur &&
-          validateOnChange &&
-          name !== changedFieldRef.current) ||
-          undefined
-      ),
-    [setFieldTouched, validateOnBlur, validateOnChange]
-  );
-
   const setFieldDirty = useCallback(
     (name: string) => {
       setStateRef(
@@ -572,7 +560,11 @@ const useForm = <V extends FormValues = FormValues>({
         // eslint-disable-next-line react-hooks/rules-of-hooks
         onBlur: useCallback(
           (e) => {
-            setFieldTouchedIfNeeded(name);
+            setFieldTouched(
+              name,
+              (validateOnChange && name !== changedFieldRef.current) ||
+                validateOnBlur
+            );
             if (onBlur) onBlur(e);
           },
           [name, onBlur]
@@ -583,8 +575,10 @@ const useForm = <V extends FormValues = FormValues>({
       getChangeEventValue,
       getState,
       handleFieldChange,
-      setFieldTouchedIfNeeded,
+      setFieldTouched,
       setFieldValue,
+      validateOnBlur,
+      validateOnChange,
     ]
   );
 
@@ -626,7 +620,11 @@ const useForm = <V extends FormValues = FormValues>({
       const { name } = target as FieldElement;
 
       if (fieldsRef.current[name] && !ignoreFieldsRef.current[name])
-        setFieldTouchedIfNeeded(name);
+        setFieldTouched(
+          name,
+          (validateOnChange && name !== changedFieldRef.current) ||
+            validateOnBlur
+        );
     };
 
     const form = formRef.current;
@@ -652,7 +650,13 @@ const useForm = <V extends FormValues = FormValues>({
       form.removeEventListener("focusout", handleBlur);
       observer.disconnect();
     };
-  }, [handleFieldChange, setAllDomsValue, setFieldTouchedIfNeeded]);
+  }, [
+    handleFieldChange,
+    setAllDomsValue,
+    setFieldTouched,
+    validateOnBlur,
+    validateOnChange,
+  ]);
 
   return {
     formRef,