From df32f30846fea21e3b859254f483ddf97afd62a8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=94=90=E7=83=A8?= <tangye@xinpianchang.com>
Date: Fri, 23 Feb 2024 11:13:34 +0800
Subject: [PATCH] fix: tooltip performance issue

---
 packages/react/tooltip/src/Tooltip.tsx | 16 ++++++++--------
 packages/react/tooltip/src/index.ts    |  1 +
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/packages/react/tooltip/src/Tooltip.tsx b/packages/react/tooltip/src/Tooltip.tsx
index 4efeeba34b..5036973741 100644
--- a/packages/react/tooltip/src/Tooltip.tsx
+++ b/packages/react/tooltip/src/Tooltip.tsx
@@ -31,7 +31,7 @@ const DEFAULT_DELAY_DURATION = 700;
 const TOOLTIP_OPEN = 'tooltip.open';
 
 type TooltipProviderContextValue = {
-  isOpenDelayed: boolean;
+  isOpenDelayedRef: React.MutableRefObject<boolean>;
   delayDuration: number;
   onOpen(): void;
   onClose(): void;
@@ -43,7 +43,7 @@ type TooltipProviderContextValue = {
 const [TooltipProviderContextProvider, useTooltipProviderContext] =
   createTooltipContext<TooltipProviderContextValue>(PROVIDER_NAME);
 
-interface TooltipProviderProps {
+export interface TooltipProviderProps {
   children: React.ReactNode;
   /**
    * The duration from when the pointer enters the trigger until the tooltip gets opened.
@@ -72,7 +72,7 @@ const TooltipProvider: React.FC<TooltipProviderProps> = (
     disableHoverableContent = false,
     children,
   } = props;
-  const [isOpenDelayed, setIsOpenDelayed] = React.useState(true);
+  const isOpenDelayedRef = React.useRef(true);
   const isPointerInTransitRef = React.useRef(false);
   const skipDelayTimerRef = React.useRef(0);
 
@@ -84,16 +84,16 @@ const TooltipProvider: React.FC<TooltipProviderProps> = (
   return (
     <TooltipProviderContextProvider
       scope={__scopeTooltip}
-      isOpenDelayed={isOpenDelayed}
+      isOpenDelayedRef={isOpenDelayedRef}
       delayDuration={delayDuration}
       onOpen={React.useCallback(() => {
         window.clearTimeout(skipDelayTimerRef.current);
-        setIsOpenDelayed(false);
+        isOpenDelayedRef.current = false;
       }, [])}
       onClose={React.useCallback(() => {
         window.clearTimeout(skipDelayTimerRef.current);
         skipDelayTimerRef.current = window.setTimeout(
-          () => setIsOpenDelayed(true),
+          () => (isOpenDelayedRef.current = true),
           skipDelayDuration
         );
       }, [skipDelayDuration])}
@@ -222,9 +222,9 @@ const Tooltip: React.FC<TooltipProps> = (props: ScopedProps<TooltipProps>) => {
         trigger={trigger}
         onTriggerChange={setTrigger}
         onTriggerEnter={React.useCallback(() => {
-          if (providerContext.isOpenDelayed) handleDelayedOpen();
+          if (providerContext.isOpenDelayedRef.current) handleDelayedOpen();
           else handleOpen();
-        }, [providerContext.isOpenDelayed, handleDelayedOpen, handleOpen])}
+        }, [providerContext.isOpenDelayedRef, handleDelayedOpen, handleOpen])}
         onTriggerLeave={React.useCallback(() => {
           if (disableHoverableContent) {
             handleClose();
diff --git a/packages/react/tooltip/src/index.ts b/packages/react/tooltip/src/index.ts
index 21c9550ccc..4f2f2c3ebe 100644
--- a/packages/react/tooltip/src/index.ts
+++ b/packages/react/tooltip/src/index.ts
@@ -17,6 +17,7 @@ export {
 } from './Tooltip';
 export type {
   TooltipProps,
+  TooltipProviderProps,
   TooltipTriggerProps,
   TooltipPortalProps,
   TooltipContentProps,