✅ 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/Kue705FO.tsx

@@ -24,6 +24,7 @@ import useIsoDisplay from "./hooks/useIsoDisplay";
 import useLoopDisplay from "./hooks/useLoopDisplay";
 import useModulName from "./hooks/useModulName";
 import useChartData from "./hooks/useChartData";
+import useTDRChart from "./hooks/useTDRChart";
 
 const Kue705FO: React.FC<Kue705FOProps> = ({
   isolationswert,
@@ -125,26 +126,6 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
     setShowChartModal(false);
   };
 
-  // Funktion zum Erstellen des TDR-Charts
-
-  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]);
-
   //----------------------------------
   //hooks einbinden
   const kueVersion = useKueVersion(slotIndex, reduxKueVersion);
@@ -184,6 +165,7 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
 
   const zoomPlugin = useChartPlugin();
   useChartData(loopMeasurementCurveChartData);
+  const { chartInstance } = useTDRChart(selectedChartData);
 
   //---------------------------------
   return (

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;