perf: Not render fully Popup on init (#540)

* chore: fix demo

* chore: perf before render

* chore: perf before render

* test: add test case

Author: zombieJ

docs/examples/simple.tsx

@@ -1,6 +1,6 @@
 /* eslint no-console:0 */
 
-import Trigger, { ActionType } from '@rc-component/trigger';
+import Trigger, { type ActionType } from '@rc-component/trigger';
 import React from 'react';
 import '../../assets/index.less';
 
@@ -43,29 +43,26 @@ function getPopupContainer(trigger) {
   return trigger.parentNode;
 }
 
-const InnerTarget = (props) => (
-  <div
-    style={{
-      margin: 20,
-      display: 'inline-block',
-      background: 'rgba(255, 0, 0, 0.05)',
-    }}
-    tabIndex={0}
-    role="button"
-    {...props}
-  >
-    <p>This is a example of trigger usage.</p>
-    <p>You can adjust the value above</p>
-    <p>which will also change the behaviour of popup.</p>
-  </div>
+const InnerTarget = React.forwardRef(
+  (props: any, ref: React.Ref<HTMLElement>) => (
+    <div
+      style={{
+        margin: 20,
+        display: 'inline-block',
+        background: 'rgba(255, 0, 0, 0.05)',
+      }}
+      tabIndex={0}
+      role="button"
+      {...props}
+      ref={ref}
+    >
+      <p>This is a example of trigger usage.</p>
+      <p>You can adjust the value above</p>
+      <p>which will also change the behavior of popup.</p>
+    </div>
+  ),
 );
 
-const RefTarget = React.forwardRef((props, ref) => {
-  React.useImperativeHandle(ref, () => ({}));
-
-  return <InnerTarget {...props} />;
-});
-
 interface TestState {
   mask: boolean;
   maskClosable: boolean;
@@ -88,7 +85,7 @@ interface TestState {
 
 class Test extends React.Component<any, TestState> {
   state: TestState = {
-    mask: true,
+    mask: false,
     maskClosable: true,
     placement: 'bottom',
     trigger: {
@@ -377,7 +374,7 @@ class Test extends React.Component<any, TestState> {
               motionName: state.transitionName,
             }}
           >
-            <RefTarget />
+            <InnerTarget />
           </Trigger>
         </div>
       </div>

src/index.tsx

@@ -595,6 +595,10 @@ export function generateTrigger(
       };
     }
 
+    // ============================ Perf ============================
+    const rendedRef = React.useRef(false);
+    rendedRef.current ||= forceRender || mergedOpen || inMotion;
+
     // =========================== Render ===========================
     const mergedChildrenProps = {
       ...originChildProps,
@@ -651,55 +655,57 @@ export function generateTrigger(
         >
           {triggerNode}
         </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={popupMotion}
-            maskMotion={maskMotion}
-            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>
+        {rendedRef.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={popupMotion}
+              maskMotion={maskMotion}
+              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-component/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);
+    });
+  });
+});