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
Related
I'm trying to build pomodoro clock (25+5).
I have an arrow function in the child component which takes two variabels: session (passed from parent, in seconds) and Boolean var.
Problem is the function always stays at 1500 seconds even after i modified session in the parent component.
It still passing the updated variable in the child but function always shows 25mins, cant find what am i doing wrong here.
The countdown itself works fine, i just need to figure out how to change amount of time passed in that function (called Countdown in the child component)
Child component:
import React, {useState, useEffect} from "react";
const Countdown = (Session, isStarted) => { // In this function Session is always 25 mins even after if i modify the state of the variable in the parent
let InitialMinutes = Math.floor(Session / 60);
let InitialSeconds = Session % 60;
const [minutes, setMinutes ] = useState(InitialMinutes);
const [seconds, setSeconds ] = useState(InitialSeconds);
useEffect(()=>{
if (isStarted) {
let myInterval = setInterval(() => {
if (seconds > 0) {
setSeconds(seconds - 1);
}
if (seconds === 0) {
if (minutes === 0) {
clearInterval(myInterval)
} else {
setMinutes(minutes - 1);
setSeconds(59);
}
}
}, 1000)
return ()=> {
clearInterval(myInterval);
};
}}, [minutes, seconds, isStarted]);
return (
<div>
{ minutes === 0 && seconds === 0
? null
: <h1> {minutes}:{seconds < 10 ? `0${seconds}` : seconds}</h1>
}
</div>
)
}
function Timer({session}) {
const [isStarted, setIsStarted] = React.useState(false);
return (
<div className='timer'>
<h3>Session</h3>
{Countdown(session, isStarted)}
<button onClick={() => setIsStarted(true)}>start</button>
<button>stop</button>
<button>{session}</button>
</div>
)
}
export default Timer
Parent component:
function App() {
const [Break, setBreak] = React.useState(5);
const [Session, setSession] = React.useState(1500);
const increaseBreak = () => {
setBreak(prevBreak => prevBreak + 1);
};
const decreaseBreak = () => {
if (Break === 5) return Break
setBreak(prevBreak => prevBreak - 1);
};
const increaseSession = () => {
setSession(prevSession => prevSession + 60);
console.log(Session)
}
const decreaseSession = () => {
return Session === 300? Session : setSession(prevSession => prevSession - 60);
}
const formatTime = time => {
let minutes = Math.floor(time / 60);
let seconds = time % 60;
return (minutes < 10? `0${minutes}` : minutes) + ':' + (seconds < 10? `0${seconds}` : seconds)
}
return (
<div className="App">
<div className="wrapper">
<div className='container'>
<h1>25 + 5 Clock</h1>
<div className='length'>
<div className='break-length'>
<h3>Break length</h3>
<div className='adjust'>
<button onClick={decreaseBreak}>-</button>
<div className='number'>{Break}</div>
<button onClick={increaseBreak} >+</button>
</div>
</div>
<div className='session-length'>
<h3>Session length</h3>
<div className="adjust">
<button onClick={decreaseSession}>-</button>
<div className='number' id='session'>{formatTime(Session)}</div>
<button onClick={increaseSession}>+</button>
</div>
</div>
</div>
<Timer session={Session}/>
</div>
</div>
</div>
);
}
export default App;
The Countdown Component never watched for changes in the session state. I Added a use effect at the top of it and changed your variables to states. Code Below.
const Countdown = (Session, isStarted) => {
console.log(Session);
// In this function Session is always 25 mins even after if i modify the state of the variable in the parent
const [InitialMinutes, setInialMinutes] = useState(Session / 60);
const [InitialSeconds, setInitialSeconds] = useState(Session % 60);
const [minutes, setMinutes] = useState(InitialMinutes);
const [seconds, setSeconds] = useState(InitialSeconds);
useEffect(() => {
setInitialSeconds(Session % 60);
setInialMinutes(Session / 60);
setMinutes(InitialMinutes);
setSeconds(InitialSeconds);
console.log(minutes);
}, [Session]);
useEffect(() => {
if (isStarted) {
let myInterval = setInterval(() => {
if (seconds > 0) {
setSeconds(seconds - 1);
}
if (seconds === 0) {
if (minutes === 0) {
clearInterval(myInterval);
} else {
setMinutes(minutes - 1);
setSeconds(59);
}
}
}, 1000);
return () => {
clearInterval(myInterval);
};
}
}, [minutes, seconds, isStarted]);
return (
<div>
{minutes === 0 && seconds === 0 ? null : (
<h1>
{" "}
{minutes}:{seconds < 10 ? `0${seconds}` : seconds}
</h1>
)}
</div>
);
};
function Timer({ session }) {
const [isStarted, setIsStarted] = React.useState(false);
return (
<div className="timer">
<h3>Session</h3>
{Countdown(session, isStarted)}
<button onClick={() => setIsStarted(true)}>start</button>
<button>stop</button>
<button>{session}</button>
</div>
);
}
export default Timer;
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!
I'm trying to push new values to an array but all I'm getting is only the last value computed. I've looked at other answers but couldn't seem to figure it out. I appreciate the help thanks.
brief: upon clicking start I set a new date, then upon each time I click on the square div, the time is calculated between the previous date and the current date and the difference (diff) is oputput. I am attempting to save all the diff values into an array called diffArray using push() but only the last value is being saved/ output.
function App() {
const [startTime, setStartTime] = useState();
const [diff, setDiff] = useState();
const [gate, setGate] = useState(false);
const [left, setLeft] = useState(Math.floor(Math.random() * 1000));
const [top, setTop] = useState(Math.floor(Math.random() * 1000));
let diffArray = [];
const divStyle = {
height: 20,
width: 20,
top: top,
left: left,
position: "absolute",
backgroundColor: "brown"
};
const handleClick = () => {
setDiff((Date.now() - startTime) + '/ms');
if (diff !== undefined) {
diffArray.push(diff);
}
setStartTime(Date.now());
respawn();
ArrayMsOutput(diffArray);
}
const startClick = () => {
setGate(!gate);
setStartTime(Date.now());
}
const respawn = (e) => {
setLeft(Math.floor(Math.random() * 1000));
setTop(Math.floor(Math.random() * 900));
}
const ArrayMsOutput = (e) => {
return e;
}
return (
<div className="App">
<button onClick={startClick}>{gate ? 'Stop' : 'Start'}</button>
<div>{gate && diff}</div>
<div>{ArrayMsOutput()}</div>
{gate && <div onClick={handleClick} style={divStyle}>
</div>}
</div>
);
}
export default App;
const handleClick = () => {
setDiff((Date.now() - startTime) + '/ms');
if (diff !== undefined) {
diffArray.push(diff);
}
}
This won't work because your hook will have the value after the end of the function. You need to do:
const handleClick = () => {
const newDiff = (Date.now() - startTime) + '/ms';
setDiff(newDiff);
if (newDiff !== undefined) {
diffArray.push(newDiff);
}
}
Then, your array has only the latest value because you need to convert it to a useState hook: const [diffArray, setDiffArray] = useState([]) .
When you've done it, refacto your function to:
const handleClick = () => {
const newDiff = (Date.now() - startTime) + '/ms';
setDiff(newDiff);
if (newDiff !== undefined) {
setDiffArray(oldArray => [...oldArray, newDiff])
}
}
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
I'm trying to return the number of seconds whilst holding in a button.
eg: "click+ hold, inits -> counts & displays 1, 2, 3, 4, 5 -> leaves button -> resets back to 0"
I've gotten close. It works fine, in my console, but whenever I try to update the state it ends up in an infinite loop.
import React, { useState, useEffect } from "react";
const Emergency = () => {
let counter = 0;
let timerinterval;
const [ms, setMs] = useState(counter);
const timer = start => {
console.log("tick tock");
console.log(start);
if (start === true && counter >= 1) {
timerinterval = setInterval(() => {
counter += 1;
console.log(counter);
setMs(counter); //When I remove this, the infinite loop disappears.
}, [1000]);
} else {
setMs(0);
}
};
const pressingDown = e => {
console.log("start");
e.preventDefault();
counter = 1;
timer(true);
};
const notPressingDown = e => {
console.log("stop");
e.preventDefault();
timer(false);
setMs(0);
clearInterval(timerinterval);
};
return (
<>
<button
onMouseDown={pressingDown}
onMouseUp={notPressingDown}
onTouchStart={pressingDown}
onTouchEnd={notPressingDown}
className="button is-primary mt-3"
>
Emergency
</button>
<br />
Time holding it is.... {ms}
</>
);
};
export default Emergency;
An easy way would be to calculate the time difference between mouseDown and mouseUp, but for the sake of UX, I would like to {ms} to update live as I'm holding the button.
Any suggestions?
Thanks!
There are two problems with your code:
You are not clearing interval. timeInterval is a new variable whenever your component is re-rendered. You need to use ref (const timeInterval = React.useRef(null); ... timeInterval.current = ... ; clearInterval(timeInterval.current);
Also you need to remove counter = 1; from your pressingDowm function, because before each setMs you are incrementing it by one
const Emergency = () => {
let counter = 0;
let timerinterval = React.useRef((null as unknown) as any);
const [ms, setMs] = React.useState(counter);
const timer = (start: any) => {
console.log('tick tock');
console.log(start);
if (start === true && counter >= 1) {
timerinterval.current = setInterval(() => {
console.log(counter);
setMs(counter); //When I remove this, the infinite loop disappears.
counter += 1;
//#ts-ignore
}, [1000]);
} else {
setMs(0);
}
};
const pressingDown = (e: any) => {
console.log('start');
e.preventDefault();
counter = 1;
timer(true);
};
const notPressingDown = (e: any) => {
console.log('stop');
e.preventDefault();
timer(false);
setMs(0);
clearInterval(timerinterval.current);
};
return (
<>
<button
onMouseDown={pressingDown}
onMouseUp={notPressingDown}
onTouchStart={pressingDown}
onTouchEnd={notPressingDown}
className="button is-primary mt-3"
>
Emergency
</button>
<br />
Time holding it is.... {ms}
</>
);
};
This is edited code (with some TypeScript stuff, sorry for that)