使用Chakra UI Tooltip组件导致React应用严重卡顿问题求助

问题背景 #

在React应用中使用Chakra UI的Tooltip组件，页面内包含约55个带Tooltip的按钮，鼠标悬停按钮后会出现严重卡顿，且移开鼠标后卡顿仍持续。已通过useMemo确保按钮和Tooltip首次渲染后不再更新，但问题依旧。

可能原因 #

• 动画与定位计算开销：Chakra UI Tooltip默认的过渡动画和定位逻辑，在大量实例同时存在时，会触发浏览器频繁的重绘与重排。每个Tooltip的显示/隐藏都会执行定位计算，多个实例叠加后导致布局压力过大。
• 事件监听累积：每个Tooltip都会绑定鼠标进入、离开等事件，大量实例的事件处理逻辑叠加后，会增加浏览器的事件处理开销，引发卡顿。

解决方案 #

1. 禁用或简化Tooltip动画 #

通过关闭Tooltip的过渡动画，减少渲染计算量：

import React from "react";
import { Button, Tooltip } from "@chakra-ui/react";
import "./ColorPreset.css";

function ColorPreset({ color, onClick }) {
  return (
    <Tooltip label={color} placement="top" hasTransition={false}>
      <Button
        padding="20px"
        style={{
          backgroundColor: color,
        }}
        onClick={onClick}
      />
    </Tooltip>
  );
}

export default ColorPreset;

如果需要保留动画，可以自定义更轻量的过渡配置：

<Tooltip 
  label={color} 
  placement="top"
  transitionProps={{ duration: 0.1, easing: "ease-out" }}
>
  {/* Button内容 */}
</Tooltip>

2. 添加显示延迟 #

设置delay属性，让Tooltip在鼠标悬停一段时间后才触发显示，避免快速扫过按钮时频繁触发Tooltip的显示/隐藏逻辑：

<Tooltip label={color} placement="top" delay={300}>
  {/* Button内容 */}
</Tooltip>

3. 复用单个Tooltip实例（高级优化） #

避免给每个按钮单独渲染Tooltip，改为全局维护一个Tooltip实例，通过鼠标事件动态更新其内容和位置：

// 父组件示例
import React, { useState, useRef } from "react";
import { Button, Tooltip } from "@chakra-ui/react";

function ColorPalette() {
  const [tooltipState, setTooltipState] = useState({
    show: false,
    content: "",
    position: { top: 0, left: 0 }
  });

  const handleMouseEnter = (color, e) => {
    const { top, left } = e.target.getBoundingClientRect();
    setTooltipState({
      show: true,
      content: color,
      position: {
        top: top - 10,
        left: left + e.target.offsetWidth / 2
      }
    });
  };

  const handleMouseLeave = () => {
    setTooltipState(prev => ({ ...prev, show: false }));
  };

  const colors = [/* 你的55个颜色数组 */];

  return (
    <div>
      {colors.map(color => (
        <Button
          key={color}
          padding="20px"
          style={{ backgroundColor: color }}
          onMouseEnter={(e) => handleMouseEnter(color, e)}
          onMouseLeave={handleMouseLeave}
        />
      ))}
      {tooltipState.show && (
        <Tooltip
          label={tooltipState.content}
          placement="top"
          style={{
            position: "fixed",
            top: tooltipState.position.top,
            left: tooltipState.position.left,
            transform: "translateX(-50%)"
          }}
        />
      )}
    </div>
  );
}

4. 升级Chakra UI版本 #

检查当前使用的Chakra UI版本，若存在已知的Tooltip性能bug，升级到最新稳定版可能解决问题。

临时 workaround #

如果以上方案暂时无法生效，可以尝试：

• 添加全局开关，默认关闭Tooltip功能，用户需要时再开启
• 替换为自定义的轻量Tooltip组件，只实现基础的显示/隐藏逻辑，避免多余的功能开销

内容的提问来源于stack exchange，提问作者Jamzy01