How to stop Timer when button is clicked in React? - reactjs

Question

How can I stop the both the timer when my button is clicked in reactjs.
I have noticed that when my timer is running my whole component is re-rendering every-time how to avoid this part.
export default function App() {
const [counterSecond, setCounterSecond] = React.useState(0);
const [counter, setCounter] = React.useState(120);
const [time, setTime] = React.useState("");
React.useEffect(() => {
setTimeout(() => setCounterSecond(counterSecond + 1), 1000);
setTimeout(() => setCounter(counter - 1), 1000);
}, [counterSecond , counter]);
const handletimer = () => {
setTime(counterSecond);
};
return (
<div className="App">
<div>Countdown: {counterSecond}</div>
<div>Countdown Reverse: {counter}</div>
<div>time: {time} </div>
<button onClick={handletimer}>Submit</button>
</div>
);
}

Answer 1

The best way is to add a state variable representing the status of work. ie: 'working', 'paused' and toggle it.
Also, you need to unsubscribe from timeout to avoid state updates if the component get unmounted.
here is an example where you can stop and resume the timers:
export default function App() {
const [counterSecond, setCounterSecond] = React.useState(0);
const [counter, setCounter] = React.useState(120);
const [time, setTime] = React.useState("");
const [status, setStatus] = React.useState("working");
React.useEffect(() => {
let secondCounterId;
let counterId;
if (status === "working") {
secondCounterId = setTimeout(
() => setCounterSecond(counterSecond + 1),
1000
);
counterId = setTimeout(() => setCounter(counter - 1), 1000);
}
return () => {
clearTimeout(counterId);
clearTimeout(secondCounterId);
};
}, [counterSecond, counter, status]);
const handletimer = () => {
setTime(counterSecond);
};
const stopTimers = () => {
setStatus("paused");
};
const resume = () => {
setStatus("working");
};
return (
<div className="App">
<div>Countdown: {counterSecond}</div>
<div>Countdown Reverse: {counter}</div>
<div>time: {time} </div>
<button onClick={handletimer}>Submit</button>
<button onClick={stopTimers}>Stop</button>
<button onClick={resume}>resume</button>
</div>
);
}
And a working codesandbox

Answer 2

You can create a timerRunning (boolean) variable to check if the timer should run in the useEffect() like this:
const [timerRunning, setTimerRunning] = React.useState(true);
React.useEffect(() => {
if (timerRunning) {
setTimeout(() => setCounterSecond(counterSecond + 1), 1000);
setTimeout(() => setCounter(counter - 1), 1000);
}
}, [counterSecond , counter, timerRunning]);
Then toggle the timerRunning in the handletimer:
const handletimer = () => {
setTimerRunning(false);
// ... other logic
};

Answer 3

The reason time is running because after each render useEffect() will be called.Hence the time. So to correct it, you can set like if "time" is in initialstate then do those functionality otherwise not. So after rendering time will be set set to new time and problem will be solved.