refactor: optimize useMove and useControllableState

Author: huijiewei

.changeset/nine-brooms-judge.md

@@ -0,0 +1,5 @@
+---
+"@resolid/react-ui": patch
+---
+
+refactor: optimize useMove and useControllableState

package.json

@@ -12,6 +12,7 @@
     "build:packages": "pnpm run --filter @resolid/* build",
     "build:vercel": "VERCEL=1 pnpm run --filter website... build",
     "dev": "pnpm run --filter website dev",
+    "changeset": "changeset",
     "format": "oxfmt",
     "preinstall": "npx only-allow pnpm",
     "lint": "pnpm run -r --if-present lint",

packages/react-ui/src/hooks/use-controllable-state/index.ts

@@ -15,7 +15,7 @@ export const useControllableState = <T>(
 ): readonly [T, (value: SetStateAction<T>) => void] => {
   const { value, defaultValue, onChange, shouldUpdate = defaultShouldUpdate } = options;
 
-  const [uncontrolledState, setUncontrolledState] = useState(defaultValue as T);
+  const [uncontrolledState, setUncontrolledState] = useState(() => defaultValue as T);
 
   const controlled = value !== undefined;
   const currentValue = controlled ? value : uncontrolledState;

packages/react-ui/src/hooks/use-move/index.ts

@@ -25,7 +25,6 @@ export const useMove = <T extends HTMLElement = HTMLDivElement>(
   const frame = useRef(0);
   const mounted = useRef(false);
   const sliding = useRef(false);
-  const cleanup = useRef<(() => void) | null>(null);
 
   const [active, setActive] = useState(false);
 
@@ -37,15 +36,6 @@ export const useMove = <T extends HTMLElement = HTMLDivElement>(
 
   const ref = useCallback(
     (node: T | null) => {
-      if (cleanup.current) {
-        cleanup.current();
-        cleanup.current = null;
-      }
-
-      if (!node) {
-        return;
-      }
-
       const startScrubbing = () => {
         if (!sliding.current && mounted.current) {
           sliding.current = true;
@@ -125,12 +115,14 @@ export const useMove = <T extends HTMLElement = HTMLDivElement>(
         document.removeEventListener("touchend", stopScrubbing);
       };
 
-      node.addEventListener("mousedown", handleMouseDown);
-      node.addEventListener("touchstart", handleTouchStart, { passive: false });
+      node?.addEventListener("mousedown", handleMouseDown);
+      node?.addEventListener("touchstart", handleTouchStart, { passive: false });
 
-      cleanup.current = () => {
-        node.removeEventListener("mousedown", handleMouseDown);
-        node.removeEventListener("touchstart", handleTouchStart);
+      return () => {
+        if (node) {
+          node.removeEventListener("mousedown", handleMouseDown);
+          node.removeEventListener("touchstart", handleTouchStart);
+        }
       };
     },
     [direction, onChange, onScrubEnd, onScrubStart],