fix: resolve warning about nested component updates from render metho…

…ds (#2274) * fix: resolve warning about nested component updates from render methods * fix: fix lint
dream-num · May 18, 2024 · 4e7b4c5 · 4e7b4c5
1 parent c648310
commit 4e7b4c5
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 36 deletions.
diff --git a/packages/sheets-ui/src/views/sheet-bar/sheet-bar-tabs/SheetBarTabs.tsx b/packages/sheets-ui/src/views/sheet-bar/sheet-bar-tabs/SheetBarTabs.tsx
@@ -29,7 +29,7 @@ import {
     SetWorksheetOrderMutation,
 } from '@univerjs/sheets';
 import { IConfirmService, Menu } from '@univerjs/ui';
-import { useDependency, useInjector } from '@wendellhu/redi/react-bindings';
+import { useDependency } from '@wendellhu/redi/react-bindings';
 import React, { useEffect, useRef, useState } from 'react';
 
 import { SheetMenuPosition } from '../../../controllers/menu/menu';
@@ -60,7 +60,6 @@ export function SheetBarTabs() {
     const confirmService = useDependency(IConfirmService);
     const selectionRenderService = useDependency(ISelectionRenderService);
     const editorBridgeService = useDependency(IEditorBridgeService);
-    const injector = useInjector();
 
     const workbook = univerInstanceService.getCurrentUnitForType<Workbook>(UniverInstanceType.UNIVER_SHEET)!;
 

diff --git a/packages/sheets-ui/src/views/sheet-container/SheetContainer.tsx b/packages/sheets-ui/src/views/sheet-container/SheetContainer.tsx
@@ -48,9 +48,7 @@ export function RenderSheetHeader() {
     if (!workbook) return null;
 
     return (
-        <>
-            <FormulaBar />
-        </>
+        <FormulaBar />
     );
 }
 

diff --git a/packages/ui/src/controllers/ui/ui-desktop.controller.tsx b/packages/ui/src/controllers/ui/ui-desktop.controller.tsx
@@ -25,7 +25,6 @@ import { delay, filter, take } from 'rxjs';
 
 import { ILayoutService } from '../../services/layout/layout.service';
 import { App } from '../../views/App';
-import { DesktopUIPart, IUIPartsService } from '../../services/parts/parts.service';
 import type { IWorkbenchOptions } from './ui.controller';
 
 const STEADY_TIMEOUT = 3000;
@@ -95,39 +94,23 @@ function bootStrap(
     }
 
     const ConnectedApp = connectInjector(App, injector);
-    const uiPartsService = injector.get(IUIPartsService);
     const onRendered = (canvasElement: HTMLElement) => callback(canvasElement, mountContainer);
 
     function render() {
-        const headerComponents = uiPartsService.getComponents(DesktopUIPart.HEADER);
-        const contentComponents = uiPartsService.getComponents(DesktopUIPart.CONTENT);
-        const footerComponents = uiPartsService.getComponents(DesktopUIPart.FOOTER);
-        const headerMenuComponents = uiPartsService.getComponents(DesktopUIPart.HEADER_MENU);
-        const leftSidebarComponents = uiPartsService.getComponents(DesktopUIPart.LEFT_SIDEBAR);
-        const globalComponents = uiPartsService.getComponents(DesktopUIPart.GLOBAL);
-
         createRoot(
             <ConnectedApp
                 {...options}
                 mountContainer={mountContainer}
-                headerComponents={headerComponents}
-                headerMenuComponents={headerMenuComponents}
-                leftSidebarComponents={leftSidebarComponents}
-                contentComponents={contentComponents}
-                globalComponents={globalComponents}
                 onRendered={onRendered}
-                footerComponents={footerComponents}
             />,
             mountContainer
         );
     }
 
-    const updateSubscription = uiPartsService.componentRegistered$.subscribe(render);
     render();
 
     return toDisposable(() => {
         unmount(mountContainer);
-        updateSubscription.unsubscribe();
     });
 }
 

diff --git a/packages/ui/src/services/parts/parts.service.ts b/packages/ui/src/services/parts/parts.service.ts
@@ -57,6 +57,8 @@ export class DesktopUIPartsService implements IUIPartsService {
             if (components.size === 0) {
                 this._componentsByPart.delete(part);
             }
+
+            this._componentRegistered$.complete();
         });
     }
 

diff --git a/packages/ui/src/views/App.tsx b/packages/ui/src/views/App.tsx
@@ -18,10 +18,10 @@ import { LocaleService, ThemeService } from '@univerjs/core';
 import type { ILocale } from '@univerjs/design';
 import { ConfigProvider, defaultTheme, themeInstance } from '@univerjs/design';
 import { useDependency } from '@wendellhu/redi/react-bindings';
-import type { ComponentType } from 'react';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import type { IWorkbenchOptions } from '../controllers/ui/ui.controller';
 import { IMessageService } from '../services/message/message.service';
+import { DesktopUIPart, IUIPartsService } from '../services/parts/parts.service';
 import styles from './app.module.less';
 import { ComponentContainer } from './components/ComponentContainer';
 import { Toolbar } from './components/doc-bars/Toolbar';
@@ -33,13 +33,6 @@ import { builtInGlobalComponents } from './parts';
 export interface IUniverAppProps extends IWorkbenchOptions {
     mountContainer: HTMLElement;
 
-    globalComponents?: Set<() => ComponentType>;
-    headerComponents?: Set<() => ComponentType>;
-    contentComponents?: Set<() => ComponentType>;
-    footerComponents?: Set<() => ComponentType>;
-    headerMenuComponents?: Set<() => ComponentType>;
-    leftSidebarComponents?: Set<() => ComponentType>;
-
     onRendered?: (container: HTMLElement) => void;
 }
 
@@ -48,12 +41,6 @@ export function App(props: IUniverAppProps) {
         header,
         footer,
         mountContainer,
-        headerComponents,
-        headerMenuComponents,
-        contentComponents,
-        footerComponents,
-        leftSidebarComponents,
-        globalComponents,
         onRendered,
     } = props;
 
@@ -62,10 +49,36 @@ export function App(props: IUniverAppProps) {
     const messageService = useDependency(IMessageService);
     const contentRef = useRef<HTMLDivElement>(null);
 
+    const uiPartsService = useDependency(IUIPartsService);
+
+    const [updateTrigger, setUpdateTrigger] = useState(false);
+
+    useEffect(() => {
+        const updateSubscription = uiPartsService.componentRegistered$.subscribe(() => {
+            setUpdateTrigger((prev) => !prev);
+        });
+
+        return () => {
+            updateSubscription.unsubscribe();
+        };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    const { headerComponents, contentComponents, footerComponents, headerMenuComponents, leftSidebarComponents, globalComponents } = useMemo(() => ({
+        headerComponents: uiPartsService.getComponents(DesktopUIPart.HEADER),
+        contentComponents: uiPartsService.getComponents(DesktopUIPart.CONTENT),
+        footerComponents: uiPartsService.getComponents(DesktopUIPart.FOOTER),
+        headerMenuComponents: uiPartsService.getComponents(DesktopUIPart.HEADER_MENU),
+        leftSidebarComponents: uiPartsService.getComponents(DesktopUIPart.LEFT_SIDEBAR),
+        globalComponents: uiPartsService.getComponents(DesktopUIPart.GLOBAL),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }), [updateTrigger]);
+
     useEffect(() => {
         if (!themeService.getCurrentTheme()) {
             themeService.setTheme(defaultTheme);
         }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
     useEffect(() => {