perf: not render popup on init (#554)

* perf: not render popup on init

* tests: perf not render init

Author: gavanx

src/index.tsx

@@ -644,6 +644,10 @@ export function generateTrigger(
       cloneProps.className = classNames(originChildProps.className, className);
     }
 
+    // ============================ Perf ============================
+    const renderedRef = React.useRef(false);
+    renderedRef.current ||= forceRender || mergedOpen || inMotion;
+
     // =========================== Render ===========================
     const mergedChildrenProps = {
       ...originChildProps,
@@ -702,55 +706,57 @@ export function generateTrigger(
             {triggerNode}
           </TriggerWrapper>
         </ResizeObserver>
-        <TriggerContext.Provider value={context}>
-          <Popup
-            portal={PortalComponent}
-            ref={setPopupRef}
-            prefixCls={prefixCls}
-            popup={popup}
-            className={classNames(popupClassName, alignedClassName)}
-            style={popupStyle}
-            target={targetEle}
-            onMouseEnter={onPopupMouseEnter}
-            onMouseLeave={onPopupMouseLeave}
-            // https://github.com/ant-design/ant-design/issues/43924
-            onPointerEnter={onPopupMouseEnter}
-            zIndex={zIndex}
-            // Open
-            open={mergedOpen}
-            keepDom={inMotion}
-            fresh={fresh}
-            // Click
-            onClick={onPopupClick}
-            onPointerDownCapture={onPopupPointerDown}
-            // Mask
-            mask={mask}
-            // Motion
-            motion={mergePopupMotion}
-            maskMotion={mergeMaskMotion}
-            onVisibleChanged={onVisibleChanged}
-            onPrepare={onPrepare}
-            // Portal
-            forceRender={forceRender}
-            autoDestroy={mergedAutoDestroy}
-            getPopupContainer={getPopupContainer}
-            // Arrow
-            align={alignInfo}
-            arrow={innerArrow}
-            arrowPos={arrowPos}
-            // Align
-            ready={ready}
-            offsetX={offsetX}
-            offsetY={offsetY}
-            offsetR={offsetR}
-            offsetB={offsetB}
-            onAlign={triggerAlign}
-            // Stretch
-            stretch={stretch}
-            targetWidth={targetWidth / scaleX}
-            targetHeight={targetHeight / scaleY}
-          />
-        </TriggerContext.Provider>
+        {renderedRef.current && (
+          <TriggerContext.Provider value={context}>
+            <Popup
+              portal={PortalComponent}
+              ref={setPopupRef}
+              prefixCls={prefixCls}
+              popup={popup}
+              className={classNames(popupClassName, alignedClassName)}
+              style={popupStyle}
+              target={targetEle}
+              onMouseEnter={onPopupMouseEnter}
+              onMouseLeave={onPopupMouseLeave}
+              // https://github.com/ant-design/ant-design/issues/43924
+              onPointerEnter={onPopupMouseEnter}
+              zIndex={zIndex}
+              // Open
+              open={mergedOpen}
+              keepDom={inMotion}
+              fresh={fresh}
+              // Click
+              onClick={onPopupClick}
+              onPointerDownCapture={onPopupPointerDown}
+              // Mask
+              mask={mask}
+              // Motion
+              motion={mergePopupMotion}
+              maskMotion={mergeMaskMotion}
+              onVisibleChanged={onVisibleChanged}
+              onPrepare={onPrepare}
+              // Portal
+              forceRender={forceRender}
+              autoDestroy={mergedAutoDestroy}
+              getPopupContainer={getPopupContainer}
+              // Arrow
+              align={alignInfo}
+              arrow={innerArrow}
+              arrowPos={arrowPos}
+              // Align
+              ready={ready}
+              offsetX={offsetX}
+              offsetY={offsetY}
+              offsetR={offsetR}
+              offsetB={offsetB}
+              onAlign={triggerAlign}
+              // Stretch
+              stretch={stretch}
+              targetWidth={targetWidth / scaleX}
+              targetHeight={targetHeight / scaleY}
+            />
+          </TriggerContext.Provider>
+        )}
       </>
     );
   });

tests/perf.test.tsx

@@ -0,0 +1,102 @@
+import { cleanup, fireEvent, render } from '@testing-library/react';
+import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
+import React from 'react';
+import Trigger, { type TriggerProps } from '../src';
+import { awaitFakeTimer, placementAlignMap } from './util';
+
+jest.mock('../src/Popup', () => {
+  const OriReact = jest.requireActual('react');
+  const OriPopup = jest.requireActual('../src/Popup').default;
+
+  return OriReact.forwardRef((props, ref) => {
+    global.popupCalledTimes = (global.popupCalledTimes || 0) + 1;
+    return <OriPopup {...props} ref={ref} />;
+  });
+});
+
+describe('Trigger.Basic', () => {
+  beforeAll(() => {
+    spyElementPrototypes(HTMLElement, {
+      offsetParent: {
+        get: () => document.body,
+      },
+    });
+  });
+
+  beforeEach(() => {
+    global.popupCalledTimes = 0;
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    cleanup();
+    jest.useRealTimers();
+  });
+
+  async function trigger(dom: HTMLElement, selector: string, method = 'click') {
+    fireEvent[method](dom.querySelector(selector));
+    await awaitFakeTimer();
+  }
+
+  const renderTrigger = (props?: Partial<TriggerProps>) => (
+    <Trigger
+      action={['click']}
+      popupAlign={placementAlignMap.left}
+      popup={<strong className="x-content">tooltip2</strong>}
+      {...props}
+    >
+      <div className="target">click</div>
+    </Trigger>
+  );
+
+  describe('Performance', () => {
+    it('not create Popup when !open', async () => {
+      const { container } = render(renderTrigger());
+
+      // Not render Popup
+      await awaitFakeTimer();
+      expect(global.popupCalledTimes).toBe(0);
+
+      // Now can render Popup
+      await trigger(container, '.target');
+      expect(global.popupCalledTimes).toBeGreaterThan(0);
+
+      expect(document.querySelector('.rc-trigger-popup')).toBeTruthy();
+    });
+
+    it('forceRender should create when !open', async () => {
+      const { container } = render(
+        renderTrigger({
+          forceRender: true,
+        }),
+      );
+
+      await awaitFakeTimer();
+      await trigger(container, '.target');
+      expect(global.popupCalledTimes).toBeGreaterThan(0);
+
+      expect(document.querySelector('.rc-trigger-popup')).toBeTruthy();
+    });
+
+    it('hide should keep render Popup', async () => {
+      const { rerender } = render(
+        renderTrigger({
+          popupVisible: true,
+        }),
+      );
+
+      await awaitFakeTimer();
+      expect(global.popupCalledTimes).toBeGreaterThan(0);
+
+      // Hide
+      global.popupCalledTimes = 0;
+      rerender(
+        renderTrigger({
+          popupVisible: false,
+        }),
+      );
+      await awaitFakeTimer();
+      expect(global.popupCalledTimes).toBeGreaterThan(0);
+    });
+  });
+});