title: How to repeatedly call a function while mouse down?
body: <p>Im using react to build a front end that will need to use my webcam. I need to be able to click and hold a button and repeatedly call a function that will grab the a frame from the camera.</p>
  
  <pre><code>import React,{useState,useRef,useEffect} from "react"
  
  
  export function VideoFeed(){
  const[constraints] = useState({width:300,height:300})
  const longPress = useLongPress(takePhoto)
  
  let video = useRef(null)
  
  useEffect(()=&gt;{
      navigator.mediaDevices.getUserMedia({video:true})
      .then(stream=&gt;{
          let vid = video.current
          vid.srcObject = stream;
          vid.play();
      })
      .catch(e=&gt;{
          console.log(e)
      })
  },[video])
  
  function takePhoto() {
          console.log("hey")
  }
  
  return(
      &lt;div&gt;
          &lt;video autoPlay ={true} ref ={video} width={constraints.width} 
              height={constraints.height}&gt;
          &lt;/video&gt;
          &lt;button {...longPress}&gt;Snap Photo&lt;/button&gt;
      &lt;/div&gt;
      )
  }
  
  
  export function useLongPress(callback=()=&gt;{}) {
   const [startLogPress, setStartLongPress] = useState(false);
  
     useEffect(() =&gt; {
     let timerId;
      if (startLogPress) {
        timerId = setTimeout(callback, 0);
      } else {
        clearTimeout(timerId);
      }
  
  return () =&gt; {
    clearTimeout(timerId);
  };
   }, [startLogPress]);
  
      return {
        onMouseDown: () =&gt; setStartLongPress(true),
        onMouseUp: () =&gt; setStartLongPress(false),
        onMouseLeave: () =&gt; setStartLongPress(false),
        onTouchStart: () =&gt; setStartLongPress(true),
        onTouchEnd: () =&gt; setStartLongPress(false),
     };
  }
  </code></pre>
  
  <p>Im using hooks and cant figure out how to loop the function. If I add a while loop in the useEffect hook the app breaks. Single clicks work but clicking and holding does not</p>