add shallow option. better separation of concerns in tests

Author: robbieculkin

CHANGELOG.md

@@ -25,11 +25,12 @@ should change the heading of the (upcoming) version to include a major version b
 
 ## @rjsf/core
 
-- Added `experimental_componentUpdateStrategy` prop to `Form` component to control re-render optimization behavior. Supports `'customDeep'` (default, uses deep equality checks) and `'default'` (uses React's default behavior). The strategy is accessible from `SchemaField` components via the registry.
+- Added `experimental_componentUpdateStrategy` prop to `Form` component to control re-render optimization behavior. Supports `'customDeep'` (default, uses deep equality checks that ignore functions), `'shallow'`, and `'always'`
 
 ## @rjsf/utils
 
 - Extended `Registry` interface to include optional `experimental_componentUpdateStrategy` property
+- Added `shallowEquals()` utility function for shallow equality comparisons
 
 # 6.0.0-beta.12
 

packages/core/src/components/Form.tsx

@@ -200,11 +200,12 @@ export interface FormProps<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
    *
    * - `'customDeep'`: Uses RJSF's custom deep equality checks via the `deepEquals` utility function,
    *   which treats all functions as equivalent and provides optimized performance for form data comparisons.
-   * - `'default'`: Uses React's default component update behavior (shallow comparison).
+   * - `'shallow'`: Uses shallow comparison of props and state (only compares direct properties). This matches React's PureComponent behavior.
+   * - `'always'`: Always rerenders when called. This matches React's Component behavior.
    *
    * @default 'customDeep'
    */
-  experimental_componentUpdateStrategy?: 'customDeep' | 'default';
+  experimental_componentUpdateStrategy?: 'customDeep' | 'shallow' | 'always';
   /** Optional function that allows for custom merging of `allOf` schemas
    */
 
@@ -526,14 +527,7 @@ export default class Form<
    */
   shouldComponentUpdate(nextProps: FormProps<T, S, F>, nextState: FormState<T, S, F>): boolean {
     const { experimental_componentUpdateStrategy = 'customDeep' } = this.props;
-
-    if (experimental_componentUpdateStrategy === 'default') {
-      // Use React's default behavior: always update if state or props change (no shouldComponentUpdate optimization)
-      return true;
-    }
-
-    // Use custom deep equality checks via shouldRender
-    return shouldRender(this, nextProps, nextState);
+    return shouldRender(this, nextProps, nextState, experimental_componentUpdateStrategy);
   }
   /** Gets the previously raised customValidate errors.
    *

packages/core/src/components/fields/SchemaField.tsx

@@ -1,7 +1,6 @@
 import { useCallback, Component, ComponentType } from 'react';
 import {
   ADDITIONAL_PROPERTY_FLAG,
-  deepEquals,
   descriptionId,
   ErrorSchema,
   FieldProps,
@@ -15,6 +14,7 @@ import {
   mergeObjects,
   Registry,
   RJSFSchema,
+  shouldRender,
   StrictRJSFSchema,
   TranslatableString,
   UI_OPTIONS_KEY,
@@ -345,13 +345,7 @@ class SchemaField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends Fo
   shouldComponentUpdate(nextProps: Readonly<FieldProps<T, S, F>>) {
     const { experimental_componentUpdateStrategy = 'customDeep' } = this.props.registry;
 
-    if (experimental_componentUpdateStrategy === 'default') {
-      // Use React's default behavior: always update if state or props change (no shouldComponentUpdate optimization)
-      return true;
-    }
-
-    // Use custom deep equality checks
-    return !deepEquals(this.props, nextProps);
+    return shouldRender(this, nextProps, this.state, experimental_componentUpdateStrategy);
   }
 
   render() {

packages/core/test/Form.test.jsx

@@ -4972,208 +4972,4 @@ describe('Form omitExtraData and liveOmit', () => {
       expect(errors).to.have.lengthOf(0);
     });
   });
-
-  describe('experimental_componentUpdateStrategy re-render behavior', () => {
-    let renderCount;
-    let TestField;
-
-    beforeEach(() => {
-      renderCount = 0;
-
-      // Create a custom field that tracks renders
-      TestField = class extends React.Component {
-        render() {
-          renderCount++;
-          return <input type='text' value={this.props.formData || ''} readOnly />;
-        }
-      };
-    });
-
-    it('should prevent unnecessary re-renders with customDeep strategy when data unchanged', () => {
-      const schema = {
-        type: 'object',
-        properties: {
-          name: { type: 'string' },
-        },
-      };
-
-      const formData = { name: 'test' };
-
-      const { rerender } = createFormComponent({
-        schema,
-        formData,
-        experimental_componentUpdateStrategy: 'customDeep',
-        fields: { StringField: TestField },
-      });
-
-      const initialRenderCount = renderCount;
-
-      // Re-render with same data - should not cause field re-render with customDeep
-      rerender({
-        schema,
-        formData,
-        experimental_componentUpdateStrategy: 'customDeep',
-        fields: { StringField: TestField },
-      });
-
-      // With customDeep strategy, render count should remain the same for identical data
-      expect(renderCount).to.equal(initialRenderCount);
-    });
-
-    it('should allow re-renders with default strategy even when data unchanged', () => {
-      const schema = {
-        type: 'object',
-        properties: {
-          name: { type: 'string' },
-        },
-      };
-
-      const formData = { name: 'test' };
-
-      const { rerender } = createFormComponent({
-        schema,
-        formData,
-        experimental_componentUpdateStrategy: 'default',
-        fields: { StringField: TestField },
-      });
-
-      const initialRenderCount = renderCount;
-
-      // Re-render with same data - should cause field re-render with default strategy
-      rerender({
-        schema,
-        formData,
-        experimental_componentUpdateStrategy: 'default',
-        fields: { StringField: TestField },
-      });
-
-      // With default strategy, render count should increase even for identical data
-      expect(renderCount).to.be.greaterThan(initialRenderCount);
-    });
-
-    it('should re-render with customDeep strategy when data actually changes', () => {
-      const schema = {
-        type: 'object',
-        properties: {
-          name: { type: 'string' },
-        },
-      };
-
-      const initialFormData = { name: 'test' };
-      const updatedFormData = { name: 'updated' };
-
-      const { rerender } = createFormComponent({
-        schema,
-        formData: initialFormData,
-        experimental_componentUpdateStrategy: 'customDeep',
-        fields: { StringField: TestField },
-      });
-
-      const initialRenderCount = renderCount;
-
-      // Re-render with different data - should cause field re-render even with customDeep
-      rerender({
-        schema,
-        formData: updatedFormData,
-        experimental_componentUpdateStrategy: 'customDeep',
-        fields: { StringField: TestField },
-      });
-
-      // With customDeep strategy and changed data, render count should increase
-      expect(renderCount).to.be.greaterThan(initialRenderCount);
-    });
-
-    it('should handle nested object changes with customDeep strategy', () => {
-      const schema = {
-        type: 'object',
-        properties: {
-          user: {
-            type: 'object',
-            properties: {
-              name: { type: 'string' },
-              age: { type: 'number' },
-            },
-          },
-        },
-      };
-
-      const initialFormData = { user: { name: 'John', age: 25 } };
-
-      const { rerender } = createFormComponent({
-        schema,
-        formData: initialFormData,
-        experimental_componentUpdateStrategy: 'customDeep',
-        fields: { ObjectField: TestField },
-      });
-
-      const initialRenderCount = renderCount;
-
-      // Re-render with same nested data - should not cause re-render
-      rerender({
-        schema,
-        formData: { user: { name: 'John', age: 25 } }, // Same values, different object reference
-        experimental_componentUpdateStrategy: 'customDeep',
-        fields: { ObjectField: TestField },
-      });
-
-      // With customDeep strategy, should not re-render for deep-equal data
-      expect(renderCount).to.equal(initialRenderCount);
-
-      // Now change nested data
-      rerender({
-        schema,
-        formData: { user: { name: 'John', age: 26 } }, // Changed age
-        experimental_componentUpdateStrategy: 'customDeep',
-        fields: { ObjectField: TestField },
-      });
-
-      // Should re-render when nested data actually changes
-      expect(renderCount).to.be.greaterThan(initialRenderCount);
-    });
-
-    it('should handle array changes with customDeep strategy', () => {
-      const schema = {
-        type: 'object',
-        properties: {
-          items: {
-            type: 'array',
-            items: { type: 'string' },
-          },
-        },
-      };
-
-      const initialFormData = { items: ['a', 'b', 'c'] };
-
-      const { rerender } = createFormComponent({
-        schema,
-        formData: initialFormData,
-        experimental_componentUpdateStrategy: 'customDeep',
-        fields: { ArrayField: TestField },
-      });
-
-      const initialRenderCount = renderCount;
-
-      // Re-render with same array data - should not cause re-render
-      rerender({
-        schema,
-        formData: { items: ['a', 'b', 'c'] }, // Same values, different array reference
-        experimental_componentUpdateStrategy: 'customDeep',
-        fields: { ArrayField: TestField },
-      });
-
-      // With customDeep strategy, should not re-render for deep-equal arrays
-      expect(renderCount).to.equal(initialRenderCount);
-
-      // Now change array data
-      rerender({
-        schema,
-        formData: { items: ['a', 'b', 'c', 'd'] }, // Added item
-        experimental_componentUpdateStrategy: 'customDeep',
-        fields: { ArrayField: TestField },
-      });
-
-      // Should re-render when array data actually changes
-      expect(renderCount).to.be.greaterThan(initialRenderCount);
-    });
-  });
 });