perf(useForm): remove setFieldTouchedIfNeeded() to reduce bundle size

wellyshen · Nov 10, 2020 · f8c31f1 · f8c31f1
1 parent 2f69d75
commit f8c31f1
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 20 deletions.
diff --git a/.changeset/five-phones-grab.md 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
@@ -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
@@ -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,