diff --git a/packages/devextreme-react/src/core/component-base.tsx b/packages/devextreme-react/src/core/component-base.tsx
index 3d25f0d4ec1..2edd84c8ccd 100644
--- a/packages/devextreme-react/src/core/component-base.tsx
+++ b/packages/devextreme-react/src/core/component-base.tsx
@@ -9,8 +9,8 @@ import {
   useLayoutEffect,
   useCallback,
   useState,
-  useMemo,
   ReactElement,
+  useMemo,
 } from 'react';
 
 import { requestAnimationFrame } from 'devextreme/animation/frame';
@@ -98,6 +98,31 @@ const ComponentBase = forwardRef<ComponentBaseRef, any>(
 
     let widgetConfig: IConfigNode;
 
+    const templateContainer = useMemo(() => document.createElement('div'), []);
+
+    const elementDescriptor: IOptionElement = {
+      type: ElementType.Option,
+      descriptor: {
+        name: '',
+        isCollection: false,
+        templates: templateProps,
+        initialValuesProps: defaults,
+        predefinedValuesProps: {},
+        expectedChildren,
+      },
+      props,
+    };
+
+    const options = useOptionScanning(
+      elementDescriptor,
+      props.children,
+      templateContainer,
+      Symbol('initial update token'),
+    );
+
+    [widgetConfig] = options;
+    const [, context] = options;
+
     const restoreTree = useCallback(() => {
       if (childElementsDetached.current && childNodes.current?.length && element.current) {
         element.current.append(...childNodes.current);
@@ -249,6 +274,7 @@ const ComponentBase = forwardRef<ComponentBaseRef, any>(
       instance.current,
       subscribableOptions,
       independentEvents,
+      widgetConfig,
     ]);
 
     const onTemplatesRendered = useCallback(() => {
@@ -279,6 +305,7 @@ const ComponentBase = forwardRef<ComponentBaseRef, any>(
       scheduleTemplatesUpdate,
       updateCssClasses,
       props,
+      widgetConfig,
     ]);
 
     const onComponentMounted = useCallback(() => {
@@ -339,35 +366,6 @@ const ComponentBase = forwardRef<ComponentBaseRef, any>(
       shouldRestoreFocus.current,
     ]);
 
-    const templateContainer = useMemo(() => document.createElement('div'), []);
-
-    const elementDescriptor: IOptionElement = useMemo(() => ({
-      type: ElementType.Option,
-      descriptor: {
-        name: '',
-        isCollection: false,
-        templates: templateProps,
-        initialValuesProps: defaults,
-        predefinedValuesProps: {},
-        expectedChildren,
-      },
-      props,
-    }), [
-      templateProps,
-      defaults,
-      props,
-    ]);
-
-    const options = useOptionScanning(
-      elementDescriptor,
-      props.children,
-      templateContainer,
-      Symbol('initial update token'),
-    );
-
-    [widgetConfig] = options;
-    const [, context] = options;
-
     useLayoutEffect(() => {
       onComponentMounted();
 
diff --git a/packages/devextreme-react/src/core/use-option-scanning.ts b/packages/devextreme-react/src/core/use-option-scanning.ts
index 3c36b225578..6da9395a671 100644
--- a/packages/devextreme-react/src/core/use-option-scanning.ts
+++ b/packages/devextreme-react/src/core/use-option-scanning.ts
@@ -5,7 +5,6 @@ import {
   useContext,
   useRef,
   useLayoutEffect,
-  useMemo,
 } from 'react';
 
 import { ElementType, getElementType, IOptionElement } from './configuration/react/element';
@@ -32,13 +31,7 @@ export function useOptionScanning(
 
   const updateToken = Symbol('update token');
 
-  const configBuilder = useMemo(
-    () => createConfigBuilder(optionElement, parentFullName),
-    [
-      optionElement,
-      parentFullName,
-    ],
-  );
+  const configBuilder = createConfigBuilder(optionElement, parentFullName);
 
   Children.forEach(
     children,