add optimization for portal components

DevExpress · Dec 30, 2024 · bd0a8b8 · bd0a8b8
1 parent bec996e
commit bd0a8b8
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 25 deletions.
diff --git a/packages/devextreme-react/src/core/__tests__/component.test.tsx b/packages/devextreme-react/src/core/__tests__/component.test.tsx
@@ -260,8 +260,8 @@ describe('rendering', () => {
       </TestComponent>,
     );
 
-    expect(WidgetClass.mock.instances.length).toBe(3);
-    expect(WidgetClass.mock.instances[2]).toEqual({});
+    expect(WidgetClass.mock.instances.length).toBe(2);
+    expect(WidgetClass.mock.instances[1]).toEqual({});
   });
 
   it('clears nested option in strict mode', () => {
@@ -272,7 +272,7 @@ describe('rendering', () => {
         </TestComponent>
       </React.StrictMode>,
     );
-    expect(Widget.clearExtensions).toHaveBeenCalledTimes(6);
+    expect(Widget.clearExtensions).toHaveBeenCalledTimes(4);
   });
 
   it('do not pass children to options', () => {

diff --git a/packages/devextreme-react/src/core/__tests__/extension-component.test.tsx b/packages/devextreme-react/src/core/__tests__/extension-component.test.tsx
@@ -70,8 +70,7 @@ it('creates widget on componentDidMount inside another component on same element
     </TestComponent>,
   );
 
-  expect(ExtensionWidgetClass).toHaveBeenCalledTimes(2);
-  expect(ExtensionWidgetClass.mock.calls[1][0]).toBe(WidgetClass.mock.calls[0][0]);
+  expect(ExtensionWidgetClass).toHaveBeenCalledTimes(1);
 });
 
 it('unmounts without errors', () => {
@@ -91,7 +90,7 @@ it('pulls options from a single nested component', () => {
     </TestComponent>,
   );
 
-  const options = ExtensionWidgetClass.mock.calls[1][1];
+  const options = ExtensionWidgetClass.mock.calls[0][1];
 
   expect(options).toHaveProperty('option1');
   expect(options.option1).toMatchObject({

diff --git a/packages/devextreme-react/src/core/__tests__/integration/integration.test.tsx b/packages/devextreme-react/src/core/__tests__/integration/integration.test.tsx
@@ -9,7 +9,7 @@ import { ContextMenu, Item as ContextMenuItem } from '../../../context-menu';
 
 jest.useFakeTimers();
 
-describe('selectbox', () => {
+describe('integration tests', () => {
   afterEach(() => {
     jest.clearAllMocks();
     testingLib.cleanup();

diff --git a/packages/devextreme-react/src/core/__tests__/nested-option.test.tsx b/packages/devextreme-react/src/core/__tests__/nested-option.test.tsx
@@ -228,7 +228,7 @@ describe('nested option', () => {
     expect(Widget.option.mock.calls[0][1]).toEqual({ a: 345 });
   });
 
-  it('is pulled form nested component', () => {
+  it('is pulled from nested component', () => {
     render(
       <TestComponent
         templateProps={[{
@@ -264,7 +264,7 @@ describe('nested option', () => {
       </TestComponent>,
     );
 
-    expect(WidgetClass.mock.calls[3][1]).toEqual({
+    expect(WidgetClass.mock.calls[2][1]).toEqual({
       templatesRenderAsynchronously: true,
       option: {
         a: 345,

diff --git a/packages/devextreme-react/src/core/component-base.tsx b/packages/devextreme-react/src/core/component-base.tsx
@@ -9,7 +9,6 @@ import {
   useLayoutEffect,
   useCallback,
   useState,
-  useMemo,
   ReactElement,
 } from 'react';
 
@@ -354,7 +353,7 @@ const ComponentBase = forwardRef<ComponentBaseRef, any>(
       shouldRestoreFocus.current,
     ]);
 
-    const templateContainer = useMemo(() => document.createElement('div'), []);
+    const childrenContainer = useRef<HTMLDivElement>(null);
 
     const options = useOptionScanning(
       {
@@ -370,7 +369,7 @@ const ComponentBase = forwardRef<ComponentBaseRef, any>(
         props,
       },
       props.children,
-      templateContainer,
+      childrenContainer,
       Symbol('initial update token'),
       'component',
     );
@@ -445,17 +444,7 @@ const ComponentBase = forwardRef<ComponentBaseRef, any>(
           isTemplateDiscovery: false,
           isTemplateRendering: false,
         }}>
-          {
-            createPortal(
-              <TemplateRenderingContext.Provider value={{
-                isTemplateDiscovery: true,
-              }}>
-                {_renderChildren()}
-              </TemplateRenderingContext.Provider>,
-              templateContainer,
-            )
-          }
-          <div {...getElementProps()}>
+          <div ref={childrenContainer} {...getElementProps()}>
             <NestedOptionContext.Provider value={context}>
               {renderContent()}
             </NestedOptionContext.Provider>

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,
+  RefObject,
 } from 'react';
 
 import { ElementType, getElementType, IOptionElement } from './configuration/react/element';
@@ -17,7 +18,7 @@ import { NestedOptionContext, NestedOptionContextContent } from './contexts';
 export function useOptionScanning(
   optionElement: IOptionElement,
   children: ReactNode,
-  templateContainer: HTMLDivElement,
+  templateContainer: HTMLDivElement | RefObject<HTMLDivElement>,
   parentUpdateToken: symbol,
   parentType: 'option' | 'component',
 ): [
@@ -77,7 +78,11 @@ export function useOptionScanning(
   };
 
   useLayoutEffect(() => {
-    const hasTemplateRendered = templateContainer.childNodes.length > 0;
+    const container = templateContainer && "current" in templateContainer
+      ? templateContainer.current
+      : templateContainer;
+
+    const hasTemplateRendered = !!container && container.childNodes.length > 0;
     configBuilder.updateAnonymousTemplates(hasTemplateRendered);
   }, [parentUpdateToken]);