Repeat the function with onMouseDown in React - reactjs

Question

I wrote a program that when we click a button until we release the key, the function runs continuously
In each run, one unit is added up each time and one unit is reduced from the bottom, and each time the result is printed on the console.
I want this operation to be done continuously until the key is released
But I do not know where the problem is that it does not work properly
Please help me, thank you
const [step, setStep] = useState({ top: 0, bottom: 0 });
let timer;
function stop() {
clearInterval(timer);
console.log(step)
}
function handleHello() {
repeat(() => setStep({ top: step.top + 1, bottom: step.bottom - 1 }));
}
function repeat(what) {
timer = setInterval(what, 100);
what();
}
return (
<div style={{textAlign:"center"}}>
<h1>Hello</h1>
<h3>The output is on the console</h3>
<button onMouseDown={handleHello} onMouseUp={stop}>
please press
</button>
</div>
);
}

Answer 1

I think you're making it mostly correct, but you have a small problem with the timer and setState. You should use useEffect to track mouse behaviour instead of calling setState.
If you're still doubting about it, you can try it out in this sandbox
import { useState, useEffect } from 'react'
let timer; //you need to have a global variable for your `timer`
const YourComponent = () => {
const [step, setStep] = useState({ top: 0, bottom: 0 });
const [isMouseHolding, setIsMouseHolding] = useState(false)
useEffect(() => {
if(isMouseHolding) { //if holding mouse, we trigger `repeat`
repeat(() => setStep(prevState => ({ top: prevState.top + 1, bottom: prevState.bottom - 1 })))
} else {
stop() //stop it if releasing mouse holding
}
}, [isMouseHolding]) //to track mouse holding behaviour changes
const stop = () => {
clearInterval(timer);
setIsMouseHolding(false);
}
const handleHello = () => {
setIsMouseHolding(true)
}
const repeat = (what) => {
timer = setInterval(what, 100)
}
return (
<div style={{textAlign:"center"}}>
<h1>Hello</h1>
<h3>The output is on the console</h3>
<button onMouseDown={handleHello} onMouseUp={stop}>
please press
</button>
<div>Top {step.top} and down {step.bottom}</div>
</div>
);
}
export default YourComponent