cleanup ref value & raf

Author: Lukas742

packages/charts/src/components/PieChart/usePieSectorFocus.ts

@@ -33,6 +33,7 @@ export function usePieSectorFocus({
   const sectorFocusRef = useRef(-1);
   const lastSectorRef = useRef(-1);
   const spaceHeldRef = useRef(false);
+  const rafIdRef = useRef(0);
   const [inSectorMode, setInSectorMode] = useState(false);
   const getSectorLabelRef = useRef(getSectorLabel);
   // Keep ref in sync so focusSector always uses the latest callback without re-creating the memoized function.
@@ -49,6 +50,10 @@ export function usePieSectorFocus({
     setInSectorMode(false);
   }, [dataLength]);
 
+  useEffect(() => {
+    return () => cancelAnimationFrame(rafIdRef.current);
+  }, []);
+
   const focusSector = useCallback(
     (index: number) => {
       const pieGroup = chartRef.current?.querySelector<SVGGElement>('.recharts-pie');
@@ -94,6 +99,7 @@ export function usePieSectorFocus({
         .querySelectorAll<SVGGElement>('.recharts-pie-sector[tabindex]')
         .forEach((s) => s.removeAttribute('tabindex'));
     }
+    spaceHeldRef.current = false;
     sectorFocusRef.current = -1;
     setInSectorMode(false);
   }, [chartRef]);
@@ -178,7 +184,7 @@ export function usePieSectorFocus({
       // Defer cleanup — blur fires before layout effects, so the new focus target may not be settled yet.
       if (!e.currentTarget.contains(e.relatedTarget as Node)) {
         const container = e.currentTarget as HTMLElement;
-        requestAnimationFrame(() => {
+        rafIdRef.current = requestAnimationFrame(() => {
           if (!container.contains(document.activeElement)) {
             lastSectorRef.current = sectorFocusRef.current;
             exitSectorMode();