✅ Modularisierung verbessert: useEffect für createTDRChart ist jetzt in useTDRChart.ts ausgelagert.

✅ Bessere Wiederverwendbarkeit: Falls du das gleiche Verhalten in einer anderen Komponente brauchst, kannst du einfach useTDRChart importieren.
✅ Kue705FO.tsx ist schlanker: Alle Hooks sind nun ausgelagert! 🎯

🚀 Jetzt ist dein Code perfekt optimiert! 🎉

components/main/kabelueberwachung/kue705FO/hooks/useTDRChart.ts

@@ -0,0 +1,27 @@
+// components/main/kabelueberwachung/kue705FO/hooks/useTDRChart.ts
+import { useEffect, useRef } from "react";
+import Chart from "chart.js/auto";
+import { createTDRChart } from "../../../../../utils/chartUtils";
+
+const useTDRChart = (selectedChartData: any) => {
+  const chartInstance = useRef<Chart | null>(null);
+
+  useEffect(() => {
+    if (selectedChartData) {
+      createTDRChart(selectedChartData); // Neues Chart erstellen
+    }
+
+    return () => {
+      // Cleanup beim Komponentenwechsel
+      if (chartInstance.current) {
+        console.log("Chart wird beim Komponentenwechsel zerstört.");
+        chartInstance.current.destroy();
+        chartInstance.current = null;
+      }
+    };
+  }, [selectedChartData]);
+
+  return { chartInstance };
+};
+
+export default useTDRChart;