feat: improve deepEquals performance (#4292)

* Change fast-deep-equal to fast-equals

* Add changelog and change deepEquals depscription

* run cs-format

* Add JSDocs for isFunctions and customDeepEqual

* Update CHANGELOG.md

---------

Co-authored-by: Heath C <51679588+heath-freenome@users.noreply.github.com>

Author: igorbrasileiro

CHANGELOG.md

@@ -21,6 +21,13 @@ should change the heading of the (upcoming) version to include a major version b
 ## @rjsf/utils
 
 - Fixes an issue with dependencies computeDefaults to ensure we can get the dependencies defaults [#4271](https://github.com/rjsf-team/react-jsonschema-form/issues/4271)
+- Updated `deepEquals()` to use `fast-equals.createCustomEqual()` instead of `lodash.isEqualWith()`, fixing [#4291](https://github.com/rjsf-team/react-jsonschema-form/issues/4291)
+  - Switched uses of `lodash.isEqual()` to `deepEquals()` in many of the utility functions as well
+
+
+## @validator-ajv8
+
+- Use `@rjsf/utils` `deepEquals()` instead of `lodash.isEqual()` to improve performance, fixing [#4291](https://github.com/rjsf-team/react-jsonschema-form/issues/4291)
 
 # 5.20.1
 

package-lock.json

@@ -79,5 +79,6 @@
     "packages/validator-ajv6",
     "packages/validator-ajv8",
     "packages/snapshot-tests"
-  ]
+  ],
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

package.json

@@ -36,6 +36,7 @@
     "react": "^16.14.0 || >=17"
   },
   "dependencies": {
+    "fast-equals": "^5.0.1",
     "json-schema-merge-allof": "^0.8.1",
     "jsonpointer": "^5.0.1",
     "lodash": "^4.17.21",

packages/utils/package.json

@@ -14,9 +14,9 @@ import {
   ValidatorType,
 } from './types';
 import {
+  getClosestMatchingOption,
   getDefaultFormState,
   getDisplayLabel,
-  getClosestMatchingOption,
   getFirstMatchingOption,
   getMatchingOption,
   isFilesArray,

packages/utils/src/createSchemaUtils.ts

@@ -1,19 +1,46 @@
-import isEqualWith from 'lodash/isEqualWith';
+import { createCustomEqual, State } from 'fast-equals';
 
-/** Implements a deep equals using the `lodash.isEqualWith` function, that provides a customized comparator that
+/** Check if all parameters are typeof function.
+ *
+ * @param a - The first element to check typeof
+ * @param b - The second element to check typeof
+ * @returns - if typeof a and b are equal to function return true, otherwise false
+ */
+function isFunctions(a: any, b: any) {
+  return typeof a === 'function' && typeof b === 'function';
+}
+
+/** Implements a deep equals using the `fast-equal.createCustomEqual` function, that provides a customized comparator that
+ * assumes all functions in objects are equivalent.
+ *
+ * @param a - The first element to compare
+ * @param b - The second element to compare
+ * @returns - True if the `a` and `b` are deeply equal, false otherwise
+ */
+const customDeepEqual = createCustomEqual({
+  createInternalComparator: (comparator: (a: any, b: any, state: State<any>) => boolean) => {
+    return (a: any, b: any, _idxA: any, _idxB: any, _parentA: any, _parentB: any, state: State<any>) => {
+      if (isFunctions(a, b)) {
+        // Assume all functions are equivalent
+        // see https://github.com/rjsf-team/react-jsonschema-form/issues/255
+        return true;
+      }
+
+      return comparator(a, b, state);
+    };
+  },
+});
+
+/** Implements a deep equals using the `fast-equal.createCustomEqual` function, that provides a customized comparator that
  * assumes all functions are equivalent.
  *
  * @param a - The first element to compare
  * @param b - The second element to compare
  * @returns - True if the `a` and `b` are deeply equal, false otherwise
  */
 export default function deepEquals(a: any, b: any): boolean {
-  return isEqualWith(a, b, (obj: any, other: any) => {
-    if (typeof obj === 'function' && typeof other === 'function') {
-      // Assume all functions are equivalent
-      // see https://github.com/rjsf-team/react-jsonschema-form/issues/255
-      return true;
-    }
-    return undefined; // fallback to default isEquals behavior
-  });
+  if (isFunctions(a, b)) {
+    return true;
+  }
+  return customDeepEqual(a, b);
 }

packages/utils/src/deepEquals.ts

@@ -1,7 +1,6 @@
-import isEqual from 'lodash/isEqual';
-
 import { EnumOptionsType, RJSFSchema, StrictRJSFSchema } from './types';
 import enumOptionsValueForIndex from './enumOptionsValueForIndex';
+import deepEquals from './deepEquals';
 
 /** Removes the enum option value at the `valueIndex` from the currently `selected` (list of) value(s). If `selected` is
  * a list, then that list is updated to remove the enum option value with the `valueIndex` in `allEnumOptions`. If it is
@@ -22,7 +21,7 @@ export default function enumOptionsDeselectValue<S extends StrictRJSFSchema = RJ
 ): EnumOptionsType<S>['value'] | EnumOptionsType<S>['value'][] | undefined {
   const value = enumOptionsValueForIndex<S>(valueIndex, allEnumOptions);
   if (Array.isArray(selected)) {
-    return selected.filter((v) => !isEqual(v, value));
+    return selected.filter((v) => !deepEquals(v, value));
   }
-  return isEqual(value, selected) ? undefined : selected;
+  return deepEquals(value, selected) ? undefined : selected;
 }

packages/utils/src/enumOptionsDeselectValue.ts

@@ -1,5 +1,4 @@
-import isEqual from 'lodash/isEqual';
-
+import deepEquals from './deepEquals';
 import { EnumOptionsType, RJSFSchema, StrictRJSFSchema } from './types';
 
 /** Determines whether the given `value` is (one of) the `selected` value(s).
@@ -13,7 +12,7 @@ export default function enumOptionsIsSelected<S extends StrictRJSFSchema = RJSFS
   selected: EnumOptionsType<S>['value'] | EnumOptionsType<S>['value'][]
 ) {
   if (Array.isArray(selected)) {
-    return selected.some((sel) => isEqual(sel, value));
+    return selected.some((sel) => deepEquals(sel, value));
   }
-  return isEqual(selected, value);
+  return deepEquals(selected, value);
 }

packages/utils/src/enumOptionsIsSelected.ts

@@ -1,5 +1,4 @@
 import get from 'lodash/get';
-import isEqual from 'lodash/isEqual';
 
 import { ID_KEY } from '../constants';
 import hashForSchema from '../hashForSchema';
@@ -15,6 +14,7 @@ import {
   ValidationData,
   ValidatorType,
 } from '../types';
+import deepEquals from '../deepEquals';
 
 /** The type of the map of schema hash to schema
  */
@@ -67,7 +67,7 @@ export default class ParserValidator<T = any, S extends StrictRJSFSchema = RJSFS
     const existing = this.schemaMap[key];
     if (!existing) {
       this.schemaMap[key] = identifiedSchema;
-    } else if (!isEqual(existing, identifiedSchema)) {
+    } else if (!deepEquals(existing, identifiedSchema)) {
       console.error('existing schema:', JSON.stringify(existing, null, 2));
       console.error('new schema:', JSON.stringify(identifiedSchema, null, 2));
       throw new Error(
@@ -91,7 +91,7 @@ export default class ParserValidator<T = any, S extends StrictRJSFSchema = RJSFS
    * @throws - Error when the given `rootSchema` differs from the root schema provided during construction
    */
   isValid(schema: S, _formData: T, rootSchema: S): boolean {
-    if (!isEqual(rootSchema, this.rootSchema)) {
+    if (!deepEquals(rootSchema, this.rootSchema)) {
       throw new Error('Unexpectedly calling isValid() with a rootSchema that differs from the construction rootSchema');
     }
     this.addSchema(schema, hashForSchema<S>(schema));

packages/utils/src/parser/ParserValidator.ts

@@ -1,10 +1,10 @@
 import forEach from 'lodash/forEach';
-import isEqual from 'lodash/isEqual';
 
 import { FormContextType, RJSFSchema, StrictRJSFSchema } from '../types';
-import { PROPERTIES_KEY, ITEMS_KEY } from '../constants';
+import { ITEMS_KEY, PROPERTIES_KEY } from '../constants';
 import ParserValidator, { SchemaMap } from './ParserValidator';
-import { retrieveSchemaInternal, resolveAnyOrOneOfSchemas } from '../schema/retrieveSchema';
+import { resolveAnyOrOneOfSchemas, retrieveSchemaInternal } from '../schema/retrieveSchema';
+import deepEquals from '../deepEquals';
 
 /** Recursive function used to parse the given `schema` belonging to the `rootSchema`. The `validator` is used to
  * capture the sub-schemas that the `isValid()` function is called with. For each schema returned by the
@@ -24,7 +24,7 @@ function parseSchema<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends
 ) {
   const schemas = retrieveSchemaInternal<T, S, F>(validator, schema, rootSchema, undefined, true);
   schemas.forEach((schema) => {
-    const sameSchemaIndex = recurseList.findIndex((item) => isEqual(item, schema));
+    const sameSchemaIndex = recurseList.findIndex((item) => deepEquals(item, schema));
     if (sameSchemaIndex === -1) {
       recurseList.push(schema);
       const allOptions = resolveAnyOrOneOfSchemas<T, S, F>(validator, schema, rootSchema, true);