React Hooks

hooks.ts

function useMouseSpeed(updateInterval = 500) {
  const lastUpdateRef = useRef(Date.now())
  const prevPositionRef = useRef<MousePosition | null> (null)
  const currentPositionRef = useRef<MousePosition | null> (null)
  const [speed, setSpeed] = useState(0)

  useEffect(() => {
    function trackMouse({ pageX: x, pageY: y }: MouseEvent) {
      x = x / window.innerWidth
      y = y / window.innerHeight
      currentPositionRef.current = { x, y }
    }
    window.addEventListener('mousemove', trackMouse)
    return () => {
      window.removeEventListener('mousemove', trackMouse) 
    }
  }, [])

  useEffect(() => {
    function updateMouseSpeed() {
      const prevPosition = prevPositionRef.current
      const currentPosition = currentPositionRef.current
      if (prevPosition !== null && currentPosition !== null) {
        const timeDiffSec = (Date.now() - lastUpdateRef.current) / 1000
        const mouseDistance = euclidianDistance(currentPosition, prevPosition)
        setSpeed(mouseDistance / timeDiffSec)
      }
      lastUpdateRef.current = Date.now()
      prevPositionRef.current = currentPosition ? { ...currentPosition } : null
    }

    updateMouseSpeed()
    const id = setInterval(updateMouseSpeed, updateInterval)
    return () => {
      clearInterval(id)
    }
  }, [updateInterval])

  return speed
}