Code quality checks

src/components/Knob.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState, useEffect } from 'react'
+import { useRef, useState, useEffect, useCallback } from 'react'
 import { useStore } from '@nanostores/react'
 import { mappingMode } from '../stores/mappingMode'
 
@@ -58,7 +58,7 @@ export function Knob({
     e.preventDefault()
   }
 
-  const handleMouseMove = (e: MouseEvent) => {
+  const handleMouseMove = useCallback((e: MouseEvent) => {
     if (!isDragging) return
 
     const deltaY = startYRef.current - e.clientY
@@ -68,11 +68,11 @@ export function Knob({
 
     const steppedValue = Math.round(newValue / step) * step
     onChange(steppedValue)
-  }
+  }, [isDragging, max, min, step, onChange])
 
-  const handleMouseUp = () => {
+  const handleMouseUp = useCallback(() => {
     setIsDragging(false)
-  }
+  }, [])
 
   useEffect(() => {
     if (isDragging) {
@@ -83,7 +83,7 @@ export function Knob({
         window.removeEventListener('mouseup', handleMouseUp)
       }
     }
-  }, [isDragging])
+  }, [isDragging, handleMouseMove, handleMouseUp])
 
   return (
     <div className="relative flex flex-col items-center">