perf(FieldArray): add shouldComponentUpdate to cut down on unnecessar…

…y renders (#3784) * revert types * chore: add changeset --------- Co-authored-by: Jason Williams <[email protected]>
jaredpalmer · May 26, 2023 · 22e236e · 22e236e · vercel · May 26, 2023
1 parent bc9cb28
commit 22e236e
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 0 deletions.
diff --git a/.changeset/afraid-kangaroos-cheer.md b/.changeset/afraid-kangaroos-cheer.md
@@ -0,0 +1,5 @@
+---
+'formik': patch
+---
+
+Improve performance of the `FieldArray` component by adding a `shouldComponentUpdate` check; this should help avoid unnecessary re-renders which may affect the performance of a form.
diff --git a/packages/formik/src/FieldArray.tsx b/packages/formik/src/FieldArray.tsx
@@ -27,6 +27,8 @@ export type FieldArrayConfig = {
   name: string;
   /** Should field array validate the form AFTER array updates/changes? */
   validateOnChange?: boolean;
+  /** Override FieldArray's default shouldComponentUpdate */
+  shouldUpdate?: (nextProps: {}, props: {}) => boolean;
 } & SharedRenderProps<FieldArrayRenderProps>;
 export interface ArrayHelpers {
   /** Imperatively add a value to the end of an array */
@@ -153,6 +155,26 @@ class FieldArrayInner<Values = {}> extends React.Component<
     this.pop = this.pop.bind(this) as any;
   }
 
+  shouldComponentUpdate(props: any) {
+    if (this.props.shouldUpdate) {
+      return this.props.shouldUpdate(props, this.props);
+    } else if (
+      props.name !== this.props.name ||
+      getIn(props.formik.values, this.props.name) !==
+        getIn(this.props.formik.values, this.props.name) ||
+      getIn(props.formik.errors, this.props.name) !==
+        getIn(this.props.formik.errors, this.props.name) ||
+      getIn(props.formik.touched, this.props.name) !==
+        getIn(this.props.formik.touched, this.props.name) ||
+      Object.keys(this.props).length !== Object.keys(props).length ||
+      props.formik.isSubmitting !== this.props.formik.isSubmitting
+    ) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+
   componentDidUpdate(
     prevProps: FieldArrayConfig & { formik: FormikContextType<Values> }
   ) {