work on deps

yhattav · Dec 2, 2024 · b06d0b7 · b06d0b7
1 parent e48b414
commit b06d0b7
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 9 deletions.
diff --git a/src/CustomCursor.tsx b/src/CustomCursor.tsx
@@ -141,8 +141,8 @@ export const CustomCursor: React.FC<CustomCursorProps> = React.memo(
     }, [id]);
 
     React.useEffect(() => {
-      if (onMove && position.x !== null && position.y !== null) {
-        onMove(position.x, position.y);
+      if (position.x !== null && position.y !== null) {
+        onMove?.(position.x, position.y);
       }
     }, [position, onMove]);
 

diff --git a/src/hooks/useMousePosition.ts b/src/hooks/useMousePosition.ts
@@ -31,27 +31,51 @@ export function useMousePosition(
             x: e.clientX + offsetX,
             y: e.clientY + offsetY,
           };
-          setTargetPosition(newPosition);
           if (
-            positionRef.current.x === null ||
-            positionRef.current.y === null
+            newPosition.x !== targetPosition.x ||
+            newPosition.y !== targetPosition.y
           ) {
-            setPosition(newPosition);
+            setTargetPosition(newPosition);
           }
         }
       } else {
         const newPosition = {
           x: e.clientX + offsetX,
           y: e.clientY + offsetY,
         };
-        setTargetPosition(newPosition);
-        if (positionRef.current.x === null || positionRef.current.y === null) {
-          setPosition(newPosition);
+        if (
+          newPosition.x !== targetPosition.x ||
+          newPosition.y !== targetPosition.y
+        ) {
+          setTargetPosition(newPosition);
         }
       }
     },
     [containerRef, offsetX, offsetY]
   );
+  // useEffect(() => {
+  //   console.log('targetPosition', targetPosition);
+  // }, [targetPosition]);
+
+  // useEffect(() => {
+  //   console.log('position', position);
+  // }, [position]);
+
+  // useEffect(() => {
+  //   console.log('isVisible', isVisible);
+  // }, [isVisible]);
+
+  // useEffect(() => {
+  //   console.log('offsetX', offsetX);
+  // }, [offsetX]);
+
+  // useEffect(() => {
+  //   console.log('offsetY', offsetY);
+  // }, [offsetY]);
+
+  // useEffect(() => {
+  //   console.log('containerRef', containerRef);
+  // }, [containerRef]);
 
   useEffect(() => {
     const handleMouseLeave = () => {
@@ -95,5 +119,12 @@ export function useMousePosition(
     };
   }, [containerRef, updateTargetPosition]);
 
+  // Initialize position when we get the first valid targetPosition
+  useEffect(() => {
+    if (position.x === null && position.y === null) {
+      setPosition(targetPosition);
+    }
+  }, [targetPosition]);
+
   return { position, setPosition, targetPosition, isVisible };
 }
diff --git a/src/hooks/useSmoothAnimation.ts b/src/hooks/useSmoothAnimation.ts
@@ -11,6 +11,9 @@ export function useSmoothAnimation(
 ) {
   useEffect(() => {
     if (position.x === null || position.y === null) return;
+    if (position.x === targetPosition.x && position.y === targetPosition.y) {
+      return;
+    }
 
     let animationFrameId: number;