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]);
 }

src/hooks/useInteraction.ts

@@ -1,18 +1,22 @@
-import { useEffect, useState } from "react";
+import { useSyncExternalStore } from "react";
 import {
   InteractionManager,
   type InteractionSnapshot,
 } from "@/stateManager/InteractionManager";
 
+const manager = InteractionManager.getInstance();
+
 export function useInteraction(): InteractionSnapshot {
-  const manager = InteractionManager.getInstance();
-  const [state, setState] = useState<InteractionSnapshot>(manager.getState());
-
-  useEffect(() => {
-    return manager.subscribe(() => {
-      setState({ ...manager.getState() });
-    });
-  }, [manager]);
-
-  return state;
+  return useSyncExternalStore(
+    manager.subscribe.bind(manager),
+    manager.getState.bind(manager),
+  );
+}
+
+export function useInteractionSelector<T>(
+  selector: (state: InteractionSnapshot) => T,
+): T {
+  return useSyncExternalStore(manager.subscribe.bind(manager), () =>
+    selector(manager.getState()),
+  );
 }