@hsu-react/ui 2.5.3 → 2.5.5

package/src/components/ChainGraph/_hooks/callbacks.test.tsx

@@ -0,0 +1,155 @@
+import { describe, expect, it, vi } from "vitest";
+import { act, renderHook } from "@testing-library/react";
+
+vi.mock("../ChainGraphServices", () => ({ default: class {} }));
+
+import { useChainGraphLayout } from "./useChainGraphLayout";
+import { useChainGraphData } from "./useChainGraphData";
+import type ChainGraphServices from "../ChainGraphServices";
+import type { TreeGraphData } from "..";
+
+/**
+ * ChainGraph 把回调交给图实例，由图实例在后续事件里回调。
+ * 这类「出口型」回调进依赖数组，会让消费方传内联箭头时反复触发重排 / 重新 setData。
+ */
+
+const DATA = { id: "root", label: "root" } as unknown as TreeGraphData;
+
+describe("useChainGraphLayout", () => {
+  const makeGraph = () =>
+    ({ changeLayout: vi.fn() }) as unknown as ChainGraphServices & {
+      changeLayout: ReturnType<typeof vi.fn>;
+    };
+
+  it("getImage 换引用不会重新 changeLayout（整张图重排）", () => {
+    const graph = makeGraph();
+    const { rerender } = renderHook(
+      ({ getImage }: { getImage?: (img: string) => void }) =>
+        useChainGraphLayout({ graph, octopus: true, rootLevel: 0, getImage }),
+      { initialProps: { getImage: vi.fn() } },
+    );
+
+    expect(graph.changeLayout).toHaveBeenCalledTimes(1);
+
+    rerender({ getImage: vi.fn() });
+    rerender({ getImage: vi.fn() });
+
+    expect(graph.changeLayout).toHaveBeenCalledTimes(1);
+  });
+
+  it("出图时调到的是最新的 getImage，包括从无到有传入的情况", () => {
+    const graph = makeGraph();
+    const { rerender } = renderHook(
+      ({ getImage }: { getImage?: (img: string) => void }) =>
+        useChainGraphLayout({ graph, octopus: true, rootLevel: 0, getImage }),
+      { initialProps: {} as { getImage?: (img: string) => void } },
+    );
+
+    const forwarded = graph.changeLayout.mock.calls[0][2] as (
+      img: string,
+    ) => void;
+    // 没传回调时转发函数照样存在，调用不报错
+    expect(() => forwarded("img-0")).not.toThrow();
+
+    const later = vi.fn();
+    rerender({ getImage: later });
+    // 图实例里存的还是同一个转发函数，但它现在会转给新传入的回调
+    forwarded("img-1");
+    expect(later).toHaveBeenCalledWith("img-1");
+  });
+});
+
+describe("useChainGraphData", () => {
+  const makeGraph = () =>
+    ({ setData: vi.fn() }) as unknown as ChainGraphServices & {
+      setData: ReturnType<typeof vi.fn>;
+    };
+
+  type Props = {
+    getImage?: (img: string) => void;
+    labelRender?: (label: TreeGraphData) => string;
+    onLayoutingChange?: (v: boolean) => void;
+  };
+
+  it("三个回调换引用都不会重新 setData", () => {
+    const graph = makeGraph();
+    const { rerender } = renderHook(
+      (props: Props) => useChainGraphData({ graph, data: DATA, ...props }),
+      {
+        initialProps: {
+          getImage: vi.fn(),
+          labelRender: vi.fn(() => "a"),
+          onLayoutingChange: vi.fn(),
+        } as Props,
+      },
+    );
+
+    expect(graph.setData).toHaveBeenCalledTimes(1);
+
+    rerender({
+      getImage: vi.fn(),
+      labelRender: vi.fn(() => "b"),
+      onLayoutingChange: vi.fn(),
+    });
+
+    expect(graph.setData).toHaveBeenCalledTimes(1);
+  });
+
+  it("图实例回调时取到的是最新引用，不是首次 setData 时的那个", () => {
+    const graph = makeGraph();
+    const firstLabel = vi.fn(() => "first");
+    const { rerender } = renderHook(
+      (props: Props) => useChainGraphData({ graph, data: DATA, ...props }),
+      {
+        initialProps: {
+          getImage: vi.fn(),
+          labelRender: firstLabel,
+          onLayoutingChange: vi.fn(),
+        } as Props,
+      },
+    );
+
+    const pushed = graph.setData.mock.calls[0][0] as {
+      getImage: (img: string) => void;
+      labelRender?: (label: TreeGraphData) => string;
+      isLayouting: (v: boolean) => void;
+    };
+
+    const nextImage = vi.fn();
+    const nextLabel = vi.fn(() => "next");
+    const nextLayouting = vi.fn();
+    rerender({
+      getImage: nextImage,
+      labelRender: nextLabel,
+      onLayoutingChange: nextLayouting,
+    });
+
+    pushed.getImage("img");
+    expect(nextImage).toHaveBeenCalledWith("img");
+
+    expect(pushed.labelRender!(DATA)).toBe("next");
+    expect(firstLabel).not.toHaveBeenCalled();
+
+    act(() => pushed.isLayouting(false));
+    expect(nextLayouting).toHaveBeenCalledWith(false);
+  });
+
+  it("labelRender 的「传了才改写 label」语义保留：没传就是 undefined，从无到有会带上", () => {
+    const graph = makeGraph();
+    const { rerender } = renderHook(
+      ({ data, labelRender }: { data: TreeGraphData; labelRender?: Props["labelRender"] }) =>
+        useChainGraphData({ graph, data, labelRender }),
+      { initialProps: { data: DATA } as { data: TreeGraphData; labelRender?: Props["labelRender"] } },
+    );
+
+    expect(graph.setData.mock.calls[0][0].labelRender).toBeUndefined();
+
+    const label = vi.fn(() => "x");
+    const nextData = { id: "root2", label: "root2" } as unknown as TreeGraphData;
+    rerender({ data: nextData, labelRender: label });
+
+    expect(graph.setData).toHaveBeenCalledTimes(2);
+    expect(typeof graph.setData.mock.calls[1][0].labelRender).toBe("function");
+    expect(graph.setData.mock.calls[1][0].labelRender(DATA)).toBe("x");
+  });
+});

package/src/components/ChainGraph/_hooks/useChainGraphData.ts

@@ -1,7 +1,8 @@
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { Equal } from "hsu-utils";
 import ChainGraphServices from "../ChainGraphServices";
 import { TreeGraphData } from "..";
+import { useLatestRef } from "../../../hooks/useLatestRef";
 
 interface UseChainGraphDataProps {
   graph: ChainGraphServices | null;
@@ -28,6 +29,35 @@ export function useChainGraphData(props: UseChainGraphDataProps) {
   );
   const [isLayouting, setIsLayouting] = useState(true);
 
+  // 这三个回调都是「交给图实例、由它在后续事件里回调」的出口，不是数据本身。
+  // 它们进依赖数组是条死依赖：effect 体被 ObjEqual(lastData, data) 挡住，
+  // 引用变了也不会重新 setData —— 图里存的还是首次 setData 时那个闭包，
+  // 换了引用永远调不到（stale closure）。改成引用恒定的转发函数：
+  // 依赖数组只留真正的输入（graph/data/level/rootLevel），调用时总是取到最新的回调。
+  const getImageRef = useLatestRef(getImage);
+  const labelRenderRef = useLatestRef(labelRender);
+  const onLayoutingChangeRef = useLatestRef(onLayoutingChange);
+
+  const emitImage = useCallback(
+    (img: string) => {
+      getImageRef.current?.(img);
+    },
+    [getImageRef]
+  );
+  // labelRender 在 ChainGraphServices.setData 里是「传了才改写 label」的真值判断，
+  // 所以这里保留「有没有传」的语义：没传就传 undefined，传了才给转发函数。
+  const renderLabel = useCallback(
+    (label: TreeGraphData) => labelRenderRef.current!(label),
+    [labelRenderRef]
+  );
+  const emitLayouting = useCallback(
+    (value: boolean) => {
+      setIsLayouting(value);
+      onLayoutingChangeRef.current?.(value);
+    },
+    [onLayoutingChangeRef]
+  );
+
   useEffect(() => {
     if (graph && !Equal.ObjEqual(lastData, data)) {
       setLastData(data);
@@ -35,12 +65,9 @@ export function useChainGraphData(props: UseChainGraphDataProps) {
         data,
         level,
         rootLevel,
-        getImage,
-        isLayouting: (value) => {
-          setIsLayouting(value);
-          onLayoutingChange?.(value);
-        },
-        labelRender,
+        getImage: emitImage,
+        isLayouting: emitLayouting,
+        labelRender: labelRenderRef.current ? renderLabel : undefined,
       });
     }
   }, [
@@ -48,10 +75,11 @@ export function useChainGraphData(props: UseChainGraphDataProps) {
     data,
     level,
     rootLevel,
-    getImage,
-    labelRender,
-    onLayoutingChange,
     lastData,
+    emitImage,
+    emitLayouting,
+    renderLabel,
+    labelRenderRef,
   ]);
 
   return { isLayouting };

package/src/components/ChainGraph/_hooks/useChainGraphLayout.ts

@@ -1,5 +1,6 @@
-import { useEffect } from "react";
+import { useCallback, useEffect } from "react";
 import ChainGraphServices from "../ChainGraphServices";
+import { useLatestRef } from "../../../hooks/useLatestRef";
 
 interface UseChainGraphLayoutProps {
   graph: ChainGraphServices | null;
@@ -11,9 +12,21 @@ interface UseChainGraphLayoutProps {
 export function useChainGraphLayout(props: UseChainGraphLayoutProps) {
   const { graph, octopus, rootLevel, getImage } = props;
 
+  // getImage 只是「布局完成后把截图 dataURL 交出去」的出口，不是布局的输入。
+  // 它进依赖数组会让消费方每传一次内联箭头就重新 changeLayout 一次 —— 整张图重排；
+  // 消费方再把截图存进 state，就变成「重排 → 出图 → setState → 新引用 → 再重排」的死循环。
+  // 用引用恒定的转发函数注册，调用时再取最新的 getImage。
+  const getImageRef = useLatestRef(getImage);
+  const emitImage = useCallback(
+    (img: string) => {
+      getImageRef.current?.(img);
+    },
+    [getImageRef],
+  );
+
   useEffect(() => {
     if (graph && octopus !== undefined) {
-      graph.changeLayout(octopus, rootLevel, getImage);
+      graph.changeLayout(octopus, rootLevel, emitImage);
     }
-  }, [graph, octopus, rootLevel, getImage]);
+  }, [graph, octopus, rootLevel, emitImage]);
 }

package/src/components/Chart/Bar/index.tsx

@@ -24,6 +24,7 @@ import {
 } from "../_utils/cartesian";
 import { resolveChartChrome } from "../_utils/chartTheme";
 import useIsDark from "../../../hooks/useIsDark";
+import useLatestRef from "../../../hooks/useLatestRef";
 
 export interface ChartBarProps extends ChartCommonProps {
   chartTitle?: string;
@@ -89,6 +90,36 @@ const ChartBar: React.FC<ChartBarProps> = (props) => {
   const isDark = useIsDark();
   const chrome = useMemo(() => resolveChartChrome(isDark), [isDark]);
 
+  // 回调 prop 一律走 useLatestRef，不进依赖数组：消费方传内联箭头（React 里最常见的
+  // 写法）时每次渲染都是新引用，进依赖数组会让「init + setOption(notMerge)」整段重跑，
+  // 还会把当前可视窗口再同步一次给父级 —— 父级据此改 state 就是死循环。
+  // 但「有没有传回调」决定要不要注册监听，所以单独拆成布尔量进依赖数组，
+  // 这样「从无到有传入回调」仍会重新注册，不会漏。
+  const onClickRef = useLatestRef(onClick);
+  const onLegendSelectChangedRef = useLatestRef(onLegendSelectChanged);
+  const onDataZoomWindowChangedRef = useLatestRef(onDataZoomWindowChanged);
+  const hasOnClick = !!onClick;
+  const hasOnLegendSelectChanged = !!onLegendSelectChanged;
+  const hasOnDataZoomWindowChanged = !!onDataZoomWindowChanged;
+  // 已通知过父级的窗口用 ref 记账（不参与渲染）：窗口没变就不再通知，
+  // 掐断「通知 → 父级重算坐标轴 → chartOption 变 → effect 重跑 → 再通知」的自激回路
+  const notifiedZoomWindowRef = useRef<DataZoomIndexWindow | null>(null);
+  const emitZoomWindow = useCallback(
+    (next: DataZoomIndexWindow) => {
+      const prev = notifiedZoomWindowRef.current;
+      if (
+        prev &&
+        prev.startIndex === next.startIndex &&
+        prev.endIndex === next.endIndex
+      ) {
+        return;
+      }
+      notifiedZoomWindowRef.current = next;
+      onDataZoomWindowChangedRef.current?.(next);
+    },
+    [onDataZoomWindowChangedRef],
+  );
+
   // Cache the chart option with useMemo
   const chartOption = useMemo(() => {
     const def_xAxis = createDefaultCategoryXAxis(xAxisData, chrome);
@@ -328,18 +359,18 @@ const ChartBar: React.FC<ChartBarProps> = (props) => {
     }
 
     // Sync the current visible window to the caller (on initial render and after restore), used to recalculate axes based on the displayed portion
-    if (onDataZoomWindowChanged) {
+    if (hasOnDataZoomWindowChanged) {
       const zooms = (chart.getOption() as ChartsOption | undefined)
         ?.dataZoom as Array<{ start?: number; end?: number }> | undefined;
       const zoom = zooms?.[0];
       const totalLen = xAxisData?.length ?? 0;
       if (typeof zoom?.start === "number" && typeof zoom?.end === "number") {
-        onDataZoomWindowChanged(
+        emitZoomWindow(
           percentWindowToIndexWindow(zoom.start, zoom.end, totalLen),
         );
       } else {
         // Without dataZoom (e.g. scrolling not enabled due to insufficient data) the window is the full range; sync once to avoid a stale old window
-        onDataZoomWindowChanged({
+        emitZoomWindow({
           startIndex: 0,
           endIndex: Math.max(0, totalLen - 1),
         });
@@ -355,18 +386,21 @@ const ChartBar: React.FC<ChartBarProps> = (props) => {
       resizeObserverRef.current.observe(chartRef.current);
     }
 
-    // Add click event
-    if (onClick) {
-      chartInstanceRef.current?.on("click", onClick);
+    // Add click event（注册与否看布尔量，实际调用取最新引用）
+    const handleClick = (event: echarts.ECElementEvent) => {
+      onClickRef.current?.(event);
+    };
+    if (hasOnClick) {
+      chartInstanceRef.current?.on("click", handleClick);
     }
 
     // Legend selection event
     const handleLegendSelectChanged = (params: unknown) => {
-      onLegendSelectChanged?.(
+      onLegendSelectChangedRef.current?.(
         (params as { selected: Record<string, boolean> }).selected,
       );
     };
-    if (onLegendSelectChanged) {
+    if (hasOnLegendSelectChanged) {
       chartInstanceRef.current?.on(
         "legendselectchanged",
         handleLegendSelectChanged,
@@ -392,7 +426,7 @@ const ChartBar: React.FC<ChartBarProps> = (props) => {
         typeof info?.startValue === "number" &&
         typeof info?.endValue === "number"
       ) {
-        onDataZoomWindowChanged?.({
+        emitZoomWindow({
           startIndex: Math.max(0, Math.round(info.startValue)),
           endIndex: Math.max(0, Math.round(info.endValue)),
         });
@@ -400,7 +434,7 @@ const ChartBar: React.FC<ChartBarProps> = (props) => {
         typeof info?.start === "number" &&
         typeof info?.end === "number"
       ) {
-        onDataZoomWindowChanged?.(
+        emitZoomWindow(
           percentWindowToIndexWindow(
             info.start,
             info.end,
@@ -409,7 +443,7 @@ const ChartBar: React.FC<ChartBarProps> = (props) => {
         );
       }
     };
-    if (onDataZoomWindowChanged) {
+    if (hasOnDataZoomWindowChanged) {
       chartInstanceRef.current?.on("datazoom", handleDataZoom);
     }
 
@@ -445,18 +479,18 @@ const ChartBar: React.FC<ChartBarProps> = (props) => {
     return () => {
       window.removeEventListener("resize", handleResize);
 
-      if (onClick) {
-        chartInstanceRef.current?.off("click", onClick);
+      if (hasOnClick) {
+        chartInstanceRef.current?.off("click", handleClick);
       }
 
-      if (onLegendSelectChanged) {
+      if (hasOnLegendSelectChanged) {
         chartInstanceRef.current?.off(
           "legendselectchanged",
           handleLegendSelectChanged,
         );
       }
 
-      if (onDataZoomWindowChanged) {
+      if (hasOnDataZoomWindowChanged) {
         chartInstanceRef.current?.off("datazoom", handleDataZoom);
       }
 
@@ -468,9 +502,12 @@ const ChartBar: React.FC<ChartBarProps> = (props) => {
   }, [
     chartOption,
     handleResize,
-    onClick,
-    onLegendSelectChanged,
-    onDataZoomWindowChanged,
+    onClickRef,
+    onLegendSelectChangedRef,
+    hasOnClick,
+    hasOnLegendSelectChanged,
+    hasOnDataZoomWindowChanged,
+    emitZoomWindow,
     xAxisData,
     enableLegendAutoScroll,
     legendVisibleCount,
@@ -507,9 +544,9 @@ const ChartBar: React.FC<ChartBarProps> = (props) => {
       startIndex: normalizedScroll.startIndex,
       autoPlay: normalizedScroll.autoScroll,
       enableWheelScroll,
-      onWindowChange: onDataZoomWindowChanged
+      onWindowChange: hasOnDataZoomWindowChanged
         ? (startPercent, endPercent) =>
-            onDataZoomWindowChanged(
+            emitZoomWindow(
               percentWindowToIndexWindow(
                 startPercent,
                 endPercent,
@@ -525,7 +562,8 @@ const ChartBar: React.FC<ChartBarProps> = (props) => {
     normalizedScroll,
     sliderDataZoom,
     xAxisData,
-    onDataZoomWindowChanged,
+    hasOnDataZoomWindowChanged,
+    emitZoomWindow,
   ]);
 
   // Clean up resources when the component unmounts

package/src/components/Chart/Bubble/index.tsx

@@ -12,6 +12,7 @@ import {
   defaultBubbleColorList,
   drawCircles,
 } from "../_utils/bubble";
+import { useLatestRef } from "../../../hooks/useLatestRef";
 
 export interface BubbleDataItem {
   name: string;
@@ -370,6 +371,16 @@ const Bubble: React.FC<ChartBubbleProps> = (props) => {
     }
   }, [chartOption, data]);
 
+  const onChartRef = useLatestRef(onChart);
+
+  // onClick 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 跟着重跑就会
+  // 再走一遍 setOption(notMerge)，动画重播、悬浮/高亮态被清掉。注册与否看布尔量，
+  // 这样「从无到有传入 onClick」仍会注册；实际调用取 ref 里的最新引用。
+  const onClickRef = useLatestRef(onClick);
+  const hasOnClick = !!onClick;
+
+  // 回调 prop 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 会跟着
+  // 重跑并再调一次回调 —— 回调里 setState 就是死循环（详见 Input/TextArea 的说明）
   // Initialize the chart
   useEffect(() => {
     if (!chartRef.current) return;
@@ -382,7 +393,7 @@ const Bubble: React.FC<ChartBubbleProps> = (props) => {
       chart = echarts.init(chartRef.current);
       chartInstanceRef.current = chart;
       // Call the onChart callback on first initialization
-      onChart?.(chart);
+      onChartRef.current?.(chart);
     }
 
     // Resize first so echarts picks up the correct container size, then apply the option
@@ -393,16 +404,19 @@ const Bubble: React.FC<ChartBubbleProps> = (props) => {
     window.addEventListener("resize", handleResize);
 
     // Add click event
-    if (onClick) {
-      chartInstanceRef.current?.on("click", onClick);
+    const handleClick = (event: echarts.ECElementEvent) => {
+      onClickRef.current?.(event);
+    };
+    if (hasOnClick) {
+      chartInstanceRef.current?.on("click", handleClick);
     }
 
     // Cleanup function
     return () => {
       window.removeEventListener("resize", handleResize);
 
-      if (onClick) {
-        chartInstanceRef.current?.off("click", onClick);
+      if (hasOnClick) {
+        chartInstanceRef.current?.off("click", handleClick);
       }
     };
   }, [
@@ -410,8 +424,9 @@ const Bubble: React.FC<ChartBubbleProps> = (props) => {
     containerSize.width,
     containerSize.height,
     handleResize,
-    onChart,
-    onClick,
+    onChartRef,
+    onClickRef,
+    hasOnClick,
   ]);
 
   // Dispose the chart instance when the component unmounts

package/src/components/Chart/Common/index.tsx

@@ -3,6 +3,7 @@ import useContainerReady from "../_hooks/useContainerReady";
 import styles from "../index.module.scss";
 import { ChartCommonProps, ChartOptionType, ChartsOption } from "..";
 import * as echarts from "echarts";
+import { useLatestRef } from "../../../hooks/useLatestRef";
 
 const Common: React.FC<ChartCommonProps> = (props) => {
   const { className, style, onChart, ...coreOption } = props;
@@ -31,6 +32,10 @@ const Common: React.FC<ChartCommonProps> = (props) => {
     chartInstanceRef.current?.resize();
   }, []);
 
+  const onChartRef = useLatestRef(onChart);
+
+  // 回调 prop 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 会跟着
+  // 重跑并再调一次回调 —— 回调里 setState 就是死循环（详见 Input/TextArea 的说明）
   // Initialize the chart
   useEffect(() => {
     if (!chartRef.current || !containerReady) return;
@@ -46,7 +51,7 @@ const Common: React.FC<ChartCommonProps> = (props) => {
     chart.setOption(chartOption as ChartOptionType, true);
 
     // Chart-ready callback (can be used for legend auto-scroll, etc.)
-    onChart?.(chart);
+    onChartRef.current?.(chart);
 
     // Add resize listener
     window.addEventListener("resize", handleResize);
@@ -61,7 +66,7 @@ const Common: React.FC<ChartCommonProps> = (props) => {
     return () => {
       window.removeEventListener("resize", handleResize);
     };
-  }, [chartOption, handleResize, onChart,
+  }, [chartOption, handleResize, onChartRef,
     containerReady,
   ]);
 

package/src/components/Chart/Heatmap/index.tsx

@@ -9,6 +9,7 @@ import {
 } from "../_utils/heatmap";
 import { resolveChartChrome } from "../_utils/chartTheme";
 import useIsDark from "../../../hooks/useIsDark";
+import { useLatestRef } from "../../../hooks/useLatestRef";
 
 export interface HeatmapDataItem {
   /** X-axis index or name */
@@ -266,6 +267,16 @@ const Heatmap: React.FC<ChartHeatmapProps> = (props) => {
     chartInstanceRef.current?.resize();
   }, []);
 
+  const onChartRef = useLatestRef(onChart);
+
+  // onClick 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 跟着重跑就会
+  // 再走一遍 setOption(notMerge)，动画重播、悬浮/高亮态被清掉。注册与否看布尔量，
+  // 这样「从无到有传入 onClick」仍会注册；实际调用取 ref 里的最新引用。
+  const onClickRef = useLatestRef(onClick);
+  const hasOnClick = !!onClick;
+
+  // 回调 prop 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 会跟着
+  // 重跑并再调一次回调 —— 回调里 setState 就是死循环（详见 Input/TextArea 的说明）
   // Initialize the chart
   useEffect(() => {
     if (!chartRef.current || !containerReady) return;
@@ -276,7 +287,7 @@ const Heatmap: React.FC<ChartHeatmapProps> = (props) => {
       chart = echarts.init(chartRef.current);
       chartInstanceRef.current = chart;
       // Call the onChart callback on first initialization
-      onChart?.(chart);
+      onChartRef.current?.(chart);
     }
 
     // Apply the option
@@ -292,19 +303,27 @@ const Heatmap: React.FC<ChartHeatmapProps> = (props) => {
     }
 
     // Add click event
-    if (onClick) {
-      chartInstanceRef.current?.on("click", onClick);
+    const handleClick = (event: echarts.ECElementEvent) => {
+      onClickRef.current?.(event);
+    };
+    if (hasOnClick) {
+      chartInstanceRef.current?.on("click", handleClick);
     }
 
     // Cleanup function
     return () => {
       window.removeEventListener("resize", handleResize);
 
-      if (onClick) {
-        chartInstanceRef.current?.off("click", onClick);
+      if (hasOnClick) {
+        chartInstanceRef.current?.off("click", handleClick);
       }
     };
-  }, [chartOption, handleResize, onChart, onClick,
+  }, [
+    chartOption,
+    handleResize,
+    onChartRef,
+    onClickRef,
+    hasOnClick,
     containerReady,
   ]);