refacto: cleanning the codebase

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()),
+  );
 }