Split the useEffect hook in ResizeHandle into two.

y-scope · Sep 28, 2024 · 2204868 · 2204868
1 parent 20efbb5
commit 2204868
Showing 1 changed file with 16 additions and 10 deletions.
diff --git a/new-log-viewer/src/components/CentralContainer/Sidebar/ResizeHandle.tsx b/new-log-viewer/src/components/CentralContainer/Sidebar/ResizeHandle.tsx
@@ -38,34 +38,40 @@ const ResizeHandle = ({
         setIsMouseDown(true);
     };
 
+    const handleMouseMove = useCallback((ev: MouseEvent) => {
+        ev.preventDefault();
+        onResize(ev.clientX);
+    }, [onResize]);
+
     const handleMouseUp = useCallback((ev: MouseEvent) => {
         ev.preventDefault();
         setIsMouseDown(false);
         onHandleRelease();
     }, [onHandleRelease]);
 
+    // Register the event listener for mouse up.
     useEffect(() => {
-        if (false === isMouseDown) {
-            return () => null;
-        }
-
         window.addEventListener("mouseup", handleMouseUp);
 
-        const handleMouseMove = (ev: MouseEvent) => {
-            ev.preventDefault();
-            onResize(ev.clientX);
+        return () => {
+            window.removeEventListener("mouseup", handleMouseUp);
         };
+    }, [handleMouseUp]);
+
+    // On mouse down, register the event listener for mouse move.
+    useEffect(() => {
+        if (false === isMouseDown) {
+            return () => null;
+        }
 
         window.addEventListener("mousemove", handleMouseMove);
 
         return () => {
             window.removeEventListener("mousemove", handleMouseMove);
-            window.removeEventListener("mouseup", handleMouseUp);
         };
     }, [
-        handleMouseUp,
+        handleMouseMove,
         isMouseDown,
-        onResize,
     ]);
 
     return (