fix: address React 19 BC due to which configuration components do not…

… apply their options (T1269933) (#28654)
DevExpress · Dec 30, 2024 · 67546f4 · 67546f4
1 parent e32f56f
commit 67546f4
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 14 deletions.
diff --git a/packages/devextreme-react/src/core/component-base.tsx b/packages/devextreme-react/src/core/component-base.tsx
@@ -25,7 +25,7 @@ import { DXRemoveCustomArgs, DXTemplateCreator, InitArgument } from './types';
 import { elementPropNames, getClassName } from './widget-config';
 import { TemplateManager } from './template-manager';
 import { ComponentProps } from './component';
-import { ElementType } from './configuration/react/element';
+import { ElementType, IOptionElement } from './configuration/react/element';
 import { IConfigNode } from './configuration/config-node';
 
 import {
@@ -341,19 +341,24 @@ const ComponentBase = forwardRef<ComponentBaseRef, any>(
 
     const templateContainer = useMemo(() => document.createElement('div'), []);
 
-    const options = useOptionScanning(
-      {
-        type: ElementType.Option,
-        descriptor: {
-          name: '',
-          isCollection: false,
-          templates: templateProps,
-          initialValuesProps: defaults,
-          predefinedValuesProps: {},
-          expectedChildren,
-        },
-        props,
+    const elementDescriptor: IOptionElement = useMemo(() => ({
+      type: ElementType.Option,
+      descriptor: {
+        name: '',
+        isCollection: false,
+        templates: templateProps,
+        initialValuesProps: defaults,
+        predefinedValuesProps: {},
+        expectedChildren,
       },
+      props,
+    }), [
+      templateProps,
+      defaults,
+    ]);
+
+    const options = useOptionScanning(
+      elementDescriptor,
       props.children,
       templateContainer,
       Symbol('initial update token'),

diff --git a/packages/devextreme-react/src/core/use-option-scanning.ts b/packages/devextreme-react/src/core/use-option-scanning.ts
@@ -5,6 +5,7 @@ import {
   useContext,
   useRef,
   useLayoutEffect,
+  useMemo,
 } from 'react';
 
 import { ElementType, getElementType, IOptionElement } from './configuration/react/element';
@@ -31,7 +32,13 @@ export function useOptionScanning(
 
   const updateToken = Symbol('update token');
 
-  const configBuilder = createConfigBuilder(optionElement, parentFullName);
+  const configBuilder = useMemo(
+    () => createConfigBuilder(optionElement, parentFullName),
+    [
+      optionElement,
+      parentFullName,
+    ],
+  );
 
   Children.forEach(
     children,