perf(utils, validator-ajv8): improve deepEquals performance and skip redundant Ajv schema re-registration (#5046)

* perf(utils): switch deepEquals to fast-equals with cycle detection

Replaces lodash.isEqualWith with fast-equals.createCustomEqual
configured with circular: true so cyclic formData/extraErrors do not
crash with `Maximum call stack size exceeded`. Migrates the remaining
lodash.isEqual call sites in useDeepCompareMemo, isRootSchema and
findSelectedOptionInXxxOf to use deepEquals so the perf benefit is
shared across the package.

Adds regression tests for self-referential, mutually-referential and
cyclic-array inputs to pin cycle handling in place.

Refs #4291

* perf(validator-ajv8): cache rootSchema reference in handleSchemaUpdate

retrieveSchema invokes isValid (and therefore handleSchemaUpdate) once
per conditional or dependency branch evaluated during a render. On a
form with a large rootSchema and many branches this used to dominate
click cost because every call walked the entire rootSchema via
deepEquals to detect changes.

Cache the last-seen rootSchema reference and skip both the deepEquals
and the Ajv re-registration when the reference matches. Falls back to
the existing structural deepEquals when the reference changes,
preserving correctness for callers that legitimately rebuild the
schema.

Refs #4291

* Apply suggestions from code review

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

---------

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

Author: FredrikWallstrom

CHANGELOG.md

@@ -18,6 +18,14 @@ should change the heading of the (upcoming) version to include a major version b
 
 # 6.5.2
 
+## @rjsf/utils
+
+- Switched `deepEquals` from `lodash.isEqualWith` to `fast-equals.createCustomEqual` with cycle detection enabled, and replaced direct `lodash.isEqual` usage in `useDeepCompareMemo`, `isRootSchema`, and `findSelectedOptionInXxxOf` with `deepEquals`, fixing [#4291](https://github.com/rjsf-team/react-jsonschema-form/issues/4291).
+
+## @rjsf/validator-ajv8
+
+- Cached the most recent `rootSchema` reference in `handleSchemaUpdate` so repeated `isValid` calls with the same root schema skip the deep-equality check and Ajv re-registration, fixing [#4291](https://github.com/rjsf-team/react-jsonschema-form/issues/4291).
+
 ## Dev / docs / playground
 
 - Cleaned up testing to make registry mocks simpler using `getTestRegistry()` function

package-lock.json

@@ -66,6 +66,7 @@
   },
   "dependencies": {
     "@x0k/json-schema-merge": "^1.0.3",
+    "fast-equals": "^6.0.0",
     "fast-uri": "^3.1.0",
     "jsonpointer": "^5.0.1",
     "lodash": "^4.18.1",

packages/utils/package.json

@@ -1,19 +1,20 @@
-import isEqualWith from 'lodash/isEqualWith';
+import { createCustomEqual } from 'fast-equals';
 
-/** Implements a deep equals using the `lodash.isEqualWith` function, that provides a customized comparator that
- * assumes all functions are equivalent.
+/** Implements a deep equals using `fast-equals.createCustomEqual`. Functions
+ * are always considered equal, and circular references are tracked to avoid
+ * infinite recursion on self-referential inputs.
  *
  * @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
-  });
-}
+const deepEquals = createCustomEqual({
+  circular: true,
+  createCustomConfig: () => ({
+    areFunctionsEqual(_a, b) {
+      return typeof b === 'function';
+    },
+  }),
+});
+
+export default deepEquals;

packages/utils/src/deepEquals.ts

@@ -1,6 +1,6 @@
-import isEqual from 'lodash/isEqual';
 import omit from 'lodash/omit';
 
+import deepEquals from './deepEquals';
 import { FormContextType, Registry, RJSFSchema, StrictRJSFSchema } from './types';
 import { REF_KEY, RJSF_REF_KEY } from './constants';
 
@@ -20,12 +20,12 @@ export default function isRootSchema<T = any, S extends StrictRJSFSchema = RJSFS
   schemaToCompare: S,
 ): boolean {
   const { rootSchema, schemaUtils } = registry;
-  if (isEqual(schemaToCompare, rootSchema)) {
+  if (deepEquals(schemaToCompare, rootSchema)) {
     return true;
   }
   if (REF_KEY in rootSchema) {
     const resolvedSchema = schemaUtils.retrieveSchema(rootSchema);
-    return isEqual(schemaToCompare, omit(resolvedSchema, RJSF_REF_KEY));
+    return deepEquals(schemaToCompare, omit(resolvedSchema, RJSF_REF_KEY));
   }
   return false;
 }

packages/utils/src/isRootSchema.ts

@@ -1,7 +1,7 @@
 import get from 'lodash/get';
-import isEqual from 'lodash/isEqual';
 
 import { CONST_KEY, DEFAULT_KEY, PROPERTIES_KEY } from '../constants';
+import deepEquals from '../deepEquals';
 import { Experimental_CustomMergeAllOf, FormContextType, RJSFSchema, StrictRJSFSchema, ValidatorType } from '../types';
 import retrieveSchema from './retrieveSchema';
 import getDiscriminatorFieldFromSchema from '../getDiscriminatorFieldFromSchema';
@@ -42,7 +42,7 @@ export default function findSelectedOptionInXxxOf<
     const data = get(formData, selectorField);
     if (data !== undefined) {
       return xxxOfs.find((xxx) => {
-        return isEqual(
+        return deepEquals(
           get(xxx, [PROPERTIES_KEY, selectorField, DEFAULT_KEY], get(xxx, [PROPERTIES_KEY, selectorField, CONST_KEY])),
           data,
         );

packages/utils/src/schema/findSelectedOptionInXxxOf.ts

@@ -1,7 +1,8 @@
 'use client';
 
 import { useRef } from 'react';
-import isEqual from 'lodash/isEqual';
+
+import deepEquals from './deepEquals';
 
 /** Hook that stores and returns a `T` value. If `newValue` is the same as the stored one, then the stored one is
  * returned to avoid having a component rerender due it being a different object. Otherwise, the `newValue` is stored
@@ -12,7 +13,7 @@ import isEqual from 'lodash/isEqual';
  */
 export default function useDeepCompareMemo<T = unknown>(newValue: T): T {
   const valueRef = useRef<T>(newValue);
-  if (!isEqual(newValue, valueRef.current)) {
+  if (!deepEquals(newValue, valueRef.current)) {
     valueRef.current = newValue;
   }
   return valueRef.current;

packages/utils/src/useDeepCompareMemo.ts

@@ -1,7 +1,6 @@
 import { deepEquals } from '../src';
 
 describe('deepEquals()', () => {
-  // Note: deepEquals implementation uses isEqualWith, so we focus on the behavioral differences we introduced.
   it('should assume functions are always equivalent', () => {
     expect(
       deepEquals(
@@ -12,4 +11,45 @@ describe('deepEquals()', () => {
     expect(deepEquals({ foo() {} }, { foo() {} })).toBe(true);
     expect(deepEquals({ foo: { bar() {} } }, { foo: { bar() {} } })).toBe(true);
   });
+
+  it('does not stack-overflow on self-referential objects', () => {
+    const a: any = { foo: 1 };
+    a.self = a;
+    const b: any = { foo: 1 };
+    b.self = b;
+    expect(() => deepEquals(a, b)).not.toThrow();
+    expect(deepEquals(a, b)).toBe(true);
+  });
+
+  it('detects differences in self-referential objects', () => {
+    const a: any = { foo: 1 };
+    a.self = a;
+    const b: any = { foo: 2 };
+    b.self = b;
+    expect(deepEquals(a, b)).toBe(false);
+  });
+
+  it('does not stack-overflow on mutually-referential objects', () => {
+    const a1: any = { name: 'a' };
+    const a2: any = { name: 'b' };
+    a1.partner = a2;
+    a2.partner = a1;
+
+    const b1: any = { name: 'a' };
+    const b2: any = { name: 'b' };
+    b1.partner = b2;
+    b2.partner = b1;
+
+    expect(() => deepEquals(a1, b1)).not.toThrow();
+    expect(deepEquals(a1, b1)).toBe(true);
+  });
+
+  it('does not stack-overflow on cyclic arrays', () => {
+    const a: any[] = [1];
+    a.push(a);
+    const b: any[] = [1];
+    b.push(b);
+    expect(() => deepEquals(a, b)).not.toThrow();
+    expect(deepEquals(a, b)).toBe(true);
+  });
 });

packages/utils/test/deepEquals.test.ts

@@ -44,6 +44,18 @@ export default class AJV8Validator<
    */
   readonly suppressDuplicateFiltering?: SuppressDuplicateFilteringType;
 
+  /** Most recent `rootSchema` reference processed by `handleSchemaUpdate`.
+   *
+   * @private
+   */
+  private lastSeenRootSchema?: S;
+
+  /** True once a `rootSchema` has been registered with Ajv in this lifecycle.
+   *
+   * @private
+   */
+  private hasRegisteredRootSchema = false;
+
   /** Constructs an `AJV8Validator` instance using the `options`
    *
    * @param options - The `CustomValidatorOptionsType` options that are used to create the AJV instance
@@ -75,6 +87,8 @@ export default class AJV8Validator<
    */
   reset() {
     this.ajv.removeSchema();
+    this.lastSeenRootSchema = undefined;
+    this.hasRegisteredRootSchema = false;
   }
 
   /** Runs the pure validation of the `schema` and `formData` without any of the RJSF functionality. Provided for use
@@ -181,9 +195,14 @@ export default class AJV8Validator<
 
   /**
    * This function checks if a schema needs to be added and if the root schemas don't match it removes the old root schema from the ajv instance and adds the new one.
+   * When called repeatedly with the same `rootSchema` reference the deep-equality check is skipped.
+   *
    * @param rootSchema - The root schema used to provide $ref resolutions
    */
   handleSchemaUpdate(rootSchema: S): void {
+    if (this.lastSeenRootSchema === rootSchema && this.hasRegisteredRootSchema) {
+      return;
+    }
     const rootSchemaId = rootSchema[ID_KEY] ?? ROOT_SCHEMA_PREFIX;
     // add the rootSchema ROOT_SCHEMA_PREFIX as id.
     // if schema validator instance doesn't exist, add it.
@@ -194,6 +213,8 @@ export default class AJV8Validator<
       this.ajv.removeSchema(rootSchemaId);
       this.ajv.addSchema(rootSchema, rootSchemaId);
     }
+    this.lastSeenRootSchema = rootSchema;
+    this.hasRegisteredRootSchema = true;
   }
 
   /** Validates data against a schema, returning true if the data is valid, or

packages/validator-ajv8/src/validator.ts

@@ -144,6 +144,54 @@ describe('AJV8Validator', () => {
         getSchemaSpy.mockRestore();
         expect(compileSpy).toHaveBeenCalledTimes(1);
       });
+      it('skips Ajv re-registration when handleSchemaUpdate is called repeatedly with the same rootSchema reference', () => {
+        const localValidator = new AJV8Validator({});
+        const rootSchema: RJSFSchema = {
+          type: 'object',
+          properties: { foo: { type: 'string' } },
+        };
+
+        const addSchemaSpy = jest.spyOn(localValidator.ajv, 'addSchema');
+        const removeSchemaSpy = jest.spyOn(localValidator.ajv, 'removeSchema');
+
+        localValidator.handleSchemaUpdate(rootSchema);
+        localValidator.handleSchemaUpdate(rootSchema);
+        localValidator.handleSchemaUpdate(rootSchema);
+        localValidator.handleSchemaUpdate(rootSchema);
+
+        expect(addSchemaSpy).toHaveBeenCalledTimes(1);
+        expect(removeSchemaSpy).not.toHaveBeenCalled();
+
+        addSchemaSpy.mockRestore();
+        removeSchemaSpy.mockRestore();
+      });
+      it('falls back to deep-equality when handleSchemaUpdate receives a different rootSchema reference', () => {
+        const localValidator = new AJV8Validator({});
+        const rootSchemaA: RJSFSchema = {
+          type: 'object',
+          properties: { foo: { type: 'string' } },
+        };
+        const rootSchemaAClone: RJSFSchema = JSON.parse(JSON.stringify(rootSchemaA));
+        const rootSchemaB: RJSFSchema = {
+          type: 'object',
+          properties: { foo: { type: 'number' } },
+        };
+
+        const addSchemaSpy = jest.spyOn(localValidator.ajv, 'addSchema');
+        const removeSchemaSpy = jest.spyOn(localValidator.ajv, 'removeSchema');
+
+        localValidator.handleSchemaUpdate(rootSchemaA);
+        localValidator.handleSchemaUpdate(rootSchemaAClone);
+        expect(addSchemaSpy).toHaveBeenCalledTimes(1);
+        expect(removeSchemaSpy).not.toHaveBeenCalled();
+
+        localValidator.handleSchemaUpdate(rootSchemaB);
+        expect(removeSchemaSpy).toHaveBeenCalledTimes(1);
+        expect(addSchemaSpy).toHaveBeenCalledTimes(2);
+
+        addSchemaSpy.mockRestore();
+        removeSchemaSpy.mockRestore();
+      });
     });
     describe('validator.validateFormData()', () => {
       describe('No custom validate function, single value', () => {