Develop Reference

React useEffect empty dependency

The problem: when I remove the dependency array in useEffect the timer never stops. But when I add a dependency array in useEffect the timer gets stuck on 5.
How can I solve this?
const App = () => {
const [inputValue, setInputValue] = useState("");
const [target, setTarget] = useState([]);
const [score, setScore] = useState(0);
const [timer, setTimer] = useState(5);
const newQuestion = () => {
const minimum = 1;
const maximum = 10;
const int1 = Math.floor(Math.random() * (maximum - minimum + 1)) + minimum;
const int2 = Math.floor(Math.random() * (maximum - minimum + 1)) + minimum;
setTarget([int1, int2]);
};
const handleReset = () => {
setScore(0);
setTimer(5);
};
useEffect(() => {
newQuestion();
}, [score]);
useEffect(() => {
let interval = setInterval(() => {
setTimer((prev) => {
if (prev === 1) clearInterval(interval);
return prev - 1;
});
}, 1000);
return () => clearInterval(interval);
});
const handleAnsewer = () => {
const total = target[0] + target[1];
if (total === Number(inputValue)) {
setScore(score + 1);
} else {
if (score > 0) {
setScore(score - 1);
}
}
setInputValue("");
newQuestion();
};
return (
<>
<h1>Random Math Quiz</h1>
<h1> {target.join(" + ")} </h1>
<h1> Timer: {timer} </h1>
<input placeholder="Answer" value={inputValue} onChange={(e) => setInputValue(e.target.value)} />
<div>
<button disabled={timer === 0} onClick={handleAnsewer}>
{" "}
Submit{" "}
</button>
</div>
<div>
<button onClick={handleReset}> play again </button>
</div>
{score === 10 && <h1> (Score: 10 / {score}) Congrate you are master in Math!</h1>}
{score <= 9 && timer < 1 && <h1> ( Score: 10 / {score}) Oh boy this is the math class!</h1>}
</>
);
};
export default App;

Change your useEffect containing the setInterval method with this one:
useEffect(() => {
if (timer > 0){
setTimeout(() => {setTimer(timer - 1)}, 1000)
}
}, [timer])
I think the approach with setTimeout() is better because you don't need to clear intervals or any of that nonsense.
How it works
Is the condition met?
If yes, update setTimer to new time timer - 1 after 1000ms
timer changes and so it will trigger useEffect and the component will re-render
This will go on until the timer doesn't change. When it hits 0

React timer does not update when there are other re-renders going on

I have a typing test web app built with a timer and text for the user to type. The user input is recorded via event listeners in a useEffect hook. The timer also uses an useEffect hook. Everything works just fine when they are separate, but when they are together and the user types the text, the timer is paused and does not rerender. It's not a delay. Not sure why this is happening, below is the code for the timer.
const Timer = ({initMin, initSec, setFin}) => {
const [ minutes, setMinutes ] = useState(parseInt(initMin));
const [ seconds, setSeconds ] = useState(parseInt(initSec));
// const [ timeEnd, setTimeEnd ] = useState(false);
useEffect(() => {
const myInterval = setInterval(() => {
if (seconds > 0) {
setSeconds( old => old - 1 );
}
if (seconds === 0) {
if (minutes === 0) {
setFin(true); // Ends the game
clearInterval(myInterval)
} else {
setMinutes( old => old - 1 );
setSeconds(59);
}
}
}, 1000)
return () => { clearInterval(myInterval); };
});
return (
<h1> {minutes}:{seconds < 10 ? `0${seconds}` : seconds} </h1>
);
}
And for the typing component.
export default function TypeTest({setStlLst, word}) {
const [test1Arr, setTest] = useState(word.split(' '));
const tempStyles = [];
for (var i = 0; i < test1Arr.length; ++i){
var letterStyles = [];
for (var j = 0; j < test1Arr[i].length; ++j){
if (!i && !j) letterStyles.push('current');
letterStyles.push('');
}
tempStyles.push(letterStyles);
}
const [styles, setStyles] = useState(tempStyles);
const [currWord, setWord] = useState(0);
const [currChar, setChar] = useState(0);
const [prevPos, setPrev] = useState(0);
useEffect(() => {
setStlLst(styles);
const alterStyle = (e) => {
var temp = styles.slice();
test1Arr[0][0] === e.key ? temp[0][0] = 'correct' : temp[0][0] = 'incorrect';
setStyles(temp);
}
window.addEventListener("keydown", alterStyle);
return () => window.removeEventListener("keydown", alterStyle);
}, [currChar, currWord, styles, prevPos, test1Arr, setStlLst]);
return (
<div className='outer-word-container'>
<div className="word-container">
{test1Arr.map((monoWord, idx) => <Word key={idx} inputWord = {monoWord} letterStyles={styles[idx]}/>)}
</div>
</div>
)
}
Any guidance would be appreciated!

Fully functioning countdown timer using React hooks only

Here's my code. You can also check it out on Stackblitz:
import React, { useState } from 'react';
const Timer = ({
initialHours = 10,
initialMinutes = 0,
initialSeconds = 0,
}) => {
const [hours, setHours] = useState(initialHours);
const [minutes, setMinutes] = useState(initialMinutes);
const [seconds, setSeconds] = useState(initialSeconds);
let myInterval;
const startTimer = () => {
myInterval = setInterval(() => {
if (seconds > 0) {
setSeconds(seconds - 1);
}
if (seconds === 0) {
if (hours === 0 && minutes === 0) {
clearInterval(myInterval);
} else if (minutes > 0) {
setMinutes(minutes - 1);
setSeconds(59);
} else if (hours > 0) {
setHours(hours - 1);
setMinutes(59);
setSeconds(59);
}
}
}, 1000);
cancelTimer();
};
const cancelTimer = () => {
return () => {
clearInterval(myInterval);
};
};
return (
<div>
<h1 className='timer'>
{hours < 10 && hours !== 0 ? `0${hours}:` : hours >= 10 && `${hours}:`}
{minutes < 10 ? `0${minutes}` : minutes}:
{seconds < 10 ? `0${seconds}` : seconds}
</h1>
<button onClick={startTimer}>START</button>
<button>PAUSE</button>
<button>RESUME</button>
<button onClick={cancelTimer}>CANCEL</button>
</div>
);
};
export default Timer;
I'm having trouble with the START button and this is what it looks like when I click on the START button multiple times:
You'll notice that on the first click the number never continues to go down unless I click on the START button again and again but it would look like a broken slot machine. And if I hit on the CANCEL button, it should stop the timer and reset back to the set time, but it doesn't. I don't know how to solve the problem for this 2 buttons, and much more for the PAUSE and RESUME. I don't know how to make them work, too. Please help.

As suggested by #Felix Kling you can try a different approach, to check why your code is not working check the below code, I've made some changes in your Timer component :
import React, { useState } from 'react';
const Timer = ({
initialHours = 10,
initialMinutes = 0,
initialSeconds = 0,
}) => {
const [time, setTime] = useState({
h: initialHours,
m: initialMinutes,
s: initialSeconds,
});
const [timer, setTimer] = useState(null);
const startTimer = () => {
let myInterval = setInterval(() => {
setTime((time) => {
const updatedTime = { ...time };
if (time.s > 0) {
updatedTime.s--;
}
if (time.s === 0) {
if (time.h === 0 && time.m === 0) {
clearInterval(myInterval);
} else if (time.m > 0) {
updatedTime.m--;
updatedTime.s = 59;
} else if (updatedTime.h > 0) {
updatedTime.h--;
updatedTime.m = 59;
updatedTime.s = 59;
}
}
return updatedTime;
});
}, 1000);
setTimer(myInterval);
};
const pauseTimer = () => {
clearInterval(timer);
};
const cancelTimer = () => {
clearInterval(timer);
setTime({
h: initialHours,
m: initialMinutes,
s: initialSeconds,
});
};
return (
<div>
<h1 className='timer'>
{time.h < 10 && time.h !== 0
? `0${time.h}:`
: time.h >= 10 && `${time.h}:`}
{time.m < 10 ? `0${time.m}` : time.m}:
{time.s < 10 ? `0${time.s}` : time.s}
</h1>
<button onClick={startTimer}>START</button>
<button onClick={pauseTimer}>PAUSE</button>
<button onClick={cancelTimer}>CANCEL</button>
</div>
);
};
export default Timer;
Explanation:
in your startTimer function in the last line you're calling cancelTimer
When you're working with hooks then keep in mind you won't get updated value of state variable until you use function inside a set function like I'm doing in setTime and in that callback, you'll get an updated value as a first parameter
In cancelTimer method you're returning a function you've to call clearInterval also myInterval is undefined in cancelTimer so I've set it's value in state
For more information and other ways check this question

setInterval and clearInterval - Does not stop my timer

I am creating a countdown timer. In one part of the code, I use setinterval to reduce my variable by 1 for the seconds timer. In this case, the state is set to true, so that the timer is running. Clicking the pause button sets the state to false and the clearInterval is triggered. But then, my timer is still running.
Here's my code:
import React from "react";
import "./App.css";
import { useSelector, useDispatch } from "react-redux";
import { playToggle, reset } from "./actions/indexAction";
function Timer() {
const timer = useSelector((state) => state.timer);
const sessionLength = useSelector((state) => state.sessionLength);
let minutes = sessionLength;
let seconds = 60;
let refreshIntervalID;
const dispatch = useDispatch();
let resetClick = () => {
return dispatch(reset());
};
let timerFunction = () => {
if (timer == true) {
seconds--;
console.log(seconds);
}
};
if (timer == "reset") {
minutes = sessionLength;
seconds = 60;
console.log("Is Reset");
}
if (timer == true) {
console.log("timer is playing");
refreshIntervalID = setInterval(timerFunction, 1000);
} else {
console.log("timer is paused");
clearInterval(refreshIntervalID);
}
return (
<div>
<h1>Minutes: {minutes}</h1>
<h1>Minutes: {seconds}</h1>
<div>
<button onClick={() => dispatch(playToggle())}>PLAY/PAUSE</button>
</div>
<div>
<button onClick={resetClick}>RESET</button>
</div>
</div>
);
}
export default Timer;
I have looked around for answers but no luck,
And, here I tried the stateful version, and still no luck.
The code is as follows:
import React from "react";
import "./App.css";
import { useSelector, useDispatch } from "react-redux";
import { playToggle, reset, play, pause } from "./actions/indexAction";
function Timer() {
const timer = useSelector((state) => state.timer);
const sessionLength = useSelector((state) => state.sessionLength);
let minutes = sessionLength;
let seconds = 60;
var refreshIntervalID;
const dispatch = useDispatch();
let resetClick = () => {
return dispatch(reset());
};
let timerFunction = () => {
if (timer == true) {
seconds--;
console.log(seconds);
}
};
if (timer == "reset") {
minutes = sessionLength;
seconds = 60;
console.log("Is Reset");
}
if (timer == true) {
console.log("timer is playing");
refreshIntervalID = dispatch(play());
console.log(refreshIntervalID);
} else {
clearInterval(dispatch(pause()));
}
return (
<div>
<h1>Minutes: {minutes}</h1>
<h1>Minutes: {seconds}</h1>
<div>
<button onClick={() => dispatch(playToggle())}>PLAY/PAUSE</button>
</div>
<div>
<button onClick={resetClick}>RESET</button>
</div>
</div>
);
}
export default Timer;
Please help me on this one.
Thanks!

try to check your refreshIntervalID before assign with new value
if (timer == true) {
console.log("timer is playing");
if(!refreshIntervalID) {
refreshIntervalID = setInterval(timerFunction, 1000);
}
} else {
console.log("timer is paused");
clearInterval(refreshIntervalID);
refreshIntervalID = null;
}
if you want to stop the timer, just set refreshIntervalID to null

How to stop a second React timer from looping back from zero?

I'm trying to build a React component that has two timers. The first one is three seconds, and when it hits zero it says "GO!" then immediately starts the next one, which is a 60 second timer. I got all of this to work, but I can't figure out how to stop the 60 second timer from starting over when it hits zero. Ideally I will be splitting these into two components once I figure this out, but right now I just want to get everything to work properly. Can someone steer me in the right direction here?
import React, { Component } from "react";
import ReactDOM from "react-dom"
class Countdown extends React.Component {
constructor(props) {
super(props);
this.state = { time: {}, seconds: 3 };
this.timer = 0;
this.startTimer = this.startTimer.bind(this);
this.countdown = this.countdown.bind(this);
}
formatSeconds (totalSeconds) {
let seconds = totalSeconds;
let minutes = Math.floor(totalSeconds / 60);
if (seconds < 10) {
seconds = '0' + seconds;
}
if (minutes < 10) {
minutes = '0' + minutes;
}
let obj = {
"minutes": minutes,
"seconds": seconds
};
return obj;
}
componentDidMount() {
let timeLeft = this.formatSeconds(this.state.seconds);
this.setState({ time: timeLeft });
}
startTimer() {
if (this.timer === 0) {
this.timer = setInterval(this.countdown, 1000);
}
}
countdown() {
let seconds = this.state.seconds - 1;
this.setState({
time: this.formatSeconds(seconds),
seconds: seconds
});
if (seconds === 0) {
clearInterval(this.timer);
let element = (
<h2>GO!</h2>
);
ReactDOM.render(
element,
document.getElementById('go')
);
this.state.seconds = 61;
let seconds = this.state.seconds - 1;
this.timer = setInterval(this.countdown, 1000);
this.setState({
time: this.formatSeconds(seconds),
seconds: seconds
});
// how do I stop the second timer from looping?
}
}
render() {
return(
<div className="container">
<div className="row">
<div className="column small-centered medium-6 large-4">
<h2 id="go"></h2>
{this.state.time.seconds}<br />
<button className="button" onClick={this.startTimer}>Start</button>
</div>
</div>
</div>
);
}
}
export default Countdown;

Could you break it out into two countdown functions as follows?
class Countdown extends React.Component {
constructor(props) {
super(props);
this.state = {
countdownSeconds: 3,
roundSeconds: 60
};
this.countdown = this.countdown.bind(this);
this.roundCountdown = this.roundCountdown.bind(this);
this.startTimer = this.startTimer.bind(this);
}
startTimer() {
if(!this.countdownTimer) {
this.countdownTimer = setInterval(this.countdown, 1000);
}
}
countdown() {
const currentSeconds = this.state.countdownSeconds - 1;
this.setState({
countdownSeconds: currentSeconds
});
if(currentSeconds === 0) {
this.roundTimer = setInterval(this.roundCountdown, 1000);
clearInterval(this.countdownTimer);
}
}
roundCountdown() {
const currentSeconds = this.state.roundSeconds - 1;
this.setState({
roundSeconds: currentSeconds
});
if(currentSeconds === 0) {
//do whatever
clearInterval(this.roundTimer);
}
}
}
Edit:
If I understand your other question, to display the appropriate countdown you could maybe do something like
render() {
const { countdownSeconds, roundSeconds } = this.state;
return (
<div>
{countdownSeconds > 0 &&
<span>Counting down...{countdownSeconds}</span>
}
{roundSeconds > 0 && countdownSeconds === 0 &&
<span>Round underway...{roundSeconds}</span>
}
</div>
);
}
Or you could functionalize the rendering of the the timer, i.e.
renderTimer() {
const { countdownSeconds, roundSeconds } = this.state;
if(countdownSeconds > 0) {
return <span>Counting down...{countdownSeconds}</span>;
}
return <span>Round underway...{roundSeconds}</span>;
}
and then:
render() {
return (
<div>
{this.renderTimer()}
</div>
);
}