refacto: cleanning the codebase

src/hooks/debug/useDebugFolder.ts

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 import type GUI from "lil-gui";
 import { Debug } from "@/utils/debug/Debug";
 
@@ -6,12 +6,23 @@ export function useDebugFolder(
   name: string,
   setup: (folder: GUI) => void,
 ): void {
+  const setupRef = useRef(setup);
+
+  useEffect(() => {
+    setupRef.current = setup;
+  }, [setup]);
+
   useEffect(() => {
     const debug = Debug.getInstance();
     if (!debug.active) return;
+
     const folder = debug.createFolder(name);
-    if (!folder) return;
-    setup(folder);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+    if (folder) {
+      setupRef.current(folder);
+    }
+
+    return () => {
+      debug.destroyFolder(name);
+    };
+  }, [name]);
 }