We Keep Coding

countdown button using useRef - react js

I'm trying to set a countdown timer using useRef, so that I prevent re-rendering. I want the countdown timer to start counting down once the start button is clicked, then once it gets to 0, stop.
I'm a beginner, so I'm not sure what I'm doing wrong.
I saw this Start the timer when button is clicked in React.Js and I tried implementing it and adding a useRef, but it's not working. Please help, thanks in advance.
const {useState, useRef, useEffect} = React;
const Timer = () => {
const [secondsLeft, setSecondsLeft] = useState(10);
const [start, setStart] = useState(false);
let intervalRef = useRef();
const decreaseSeconds = () => setSecondsLeft((prev) => prev - 1);
useEffect(() => {
intervalRef.current = setInterval(decreaseSeconds, 1000);
return () => clearInterval(intervalRef.current);
}, []);
cosnt handleClick = () => {
let timer = null;
if (start) { // if start button is clicked...
setStart(true);
intervalRef.current = setInterval(decreaseSeconds, 1000); // start timer again
} else {
clearInterval(intervalRef.current); // stop time if button isn't clicked
}
};
return (
<div>
<div>{secondsLeft}</div>
<button onClick={handleClick}>{start ? "Start" : "Cancel"}</button>
</div>
);
}
ReactDOM.render(
<Timer />,
document.getElementById("root")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

You need to clear interval when secondsLeft value get 0.
Everytime whenever decreaseSeconds function get called check for current value and clear interval on desired condition.
const decreaseSeconds = () => {
setSecondsLeft((prev) => {
if (prev === 0) {
clearInterval(intervalRef);
setStart(false);
return 0;
}
else {
return prev - 1;
}
});
}
The clearInterval you used under useEffect get called when this component get unmout/destroy. As this is a Good Practice to add clear timeout/interval function in useEffect so that if component get's unmount timeout/interval function get clear otherwise it will be running in backgroud and cause errors.
Check useEffect Cleanup function

Adding to what Rohit said in his answer, here's a working example. You could use a ref to store the timer, but it's not needed in this case as you have a closure within the useEffect. Note that the dependency array includes the start state, so this useEffect will run each time start is updated.
const Timer = () => {
const [secondsLeft, setSecondsLeft] = React.useState(10);
const [start, setStart] = React.useState(false);
const decreaseSeconds = () => {
setSecondsLeft((prev) => {
if (prev > 0) {
return --prev
} else {
setStart(false)
return 10
}
})
};
React.useEffect(() => {
let timer
if (start) {
timer = setInterval(decreaseSeconds, 1000)
} else {
clearInterval(timer)
}
return () => clearInterval(timer)
}, [start])
const handleClick = () => setStart((prev) => !prev);
return (
<div>
<div>{secondsLeft}</div>
<button onClick={handleClick}>{start ? 'Cancel' : 'Start'}</button>
</div>
)
}
ReactDOM.createRoot(document.getElementById("root")).render(<Timer />);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>
<div id="root"></div>

Using setinterval with updating a state in a functional component

The following code demonstrates a react functional component that has a single state variable named time. It has a button click to start which fires a function named updateTimer. This meant to move the timer from 0 to 1 to 2 to 3 and so on.
function timer() {
const [time, updateTime] = useState(0);
function updateTimer() {
setInterval(() => {
updateTime(time + 1)
},1000)
}
}
return (
<>
<span>{time} seconds</span>
<button onClick={updateTimer}>Click To Start</button>
</>
)
But what happens is that the timer stops after 1. Apparently, the value of time does not get updated. Could someone please explain this?

To update the state depending on the previous state use:
updateTime((prevTime) => prevTime + 1)

Because updateTime updates the value of time in the next render of the component, the time known to the setInterval callback is not updated and remained the initial value 0, and resets to 1 at every interval.
In a useEffect run the setter updateTime based on previous value to correct the counting, also cleanup and recreate the interval as needed when the counting starts or stops.
For a basic example, the following useEffect starts an interval when updating is set true by the button. The return runs when
updating changes or when the component unmounted for cleaning up the interval, before a new one can be recreated.
useEffect(() => {
if (!updating) return;
const count = setInterval(() => {
updateTime((prev) => prev + 1);
}, 1000);
return () => {
clearInterval(count);
};
}, [updating]);
updating is added to the dependencies array so that useEffect listens to the changes of this state, and creates a new interval if it is true.
The setter updateTime does not change and it sets time based on the previous value internally, so updateTime and time do not need to be included in the dependencies array.
Example in full snippet:
const { useState, useEffect, Fragment } = React;
function Timer() {
const [time, updateTime] = useState(0);
const [updating, setUpdating] = useState(false);
useEffect(() => {
if (!updating) return;
const count = setInterval(() => {
updateTime((prev) => prev + 1);
}, 1000);
return () => {
clearInterval(count);
};
}, [updating]);
return (
<Fragment>
<p>{time} seconds</p>
<button onClick={() => setUpdating((prev) => !prev)}>{`Click To ${
updating ? "Stop" : "Start"
}`}</button>
</Fragment>
);
}
const App = () => {
return (
<div className="App">
<Timer />
</div>
);
};
ReactDOM.render(<App />, document.querySelector("#root"));
.App {
font-size: x-large;
}
button {
padding: 9px;
}
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.production.min.js"></script>

Running two countdown timers sequentially in React. The second one is skipped

I have created a functional component called Timer. I want to run a Timer for 3 seconds followed by a Timer for 6 seconds. However, the second timer stops as soon as it starts.
I think the problem is that the second Timer is using the state value from the first Timer. I'm not sure why it does that. I assume that the second Timer is a new instance so it shouldn't have any link with the first Timer.
Here's my code:
import React, { useEffect, useState } from 'react';
function App() {
const [timer1Up, setTimer1Up] = useState(false);
const [timer2Up, setTimer2Up] = useState(false);
if(!timer1Up) {
return <Timer duration={3} setTimeUp={setTimer1Up}/>
}
if(timer1Up && !timer2Up) {
return <Timer duration={6} setTimeUp={setTimer2Up}/>
}
if(timer1Up && timer2Up) {
return <>Out of all your time buddy!!</>
}
return <>I have no purpose</>;
}
interface TimerProps {
duration: number;
setTimeUp: any;
}
const Timer = (props: TimerProps) => {
const [timeLeft, setTimeLeft] = useState(props.duration);
useEffect(() => {
setTimeout(() => {
setTimeLeft(timeLeft - 1);
}, 1000);
if(timeLeft === 0) {
props.setTimeUp(true);
}
});
return <>{timeLeft} s</>
}
export default App;

if(!timer1Up) {
return <Timer duration={3} setTimeUp={setTimer1Up}/>
}
if(timer1Up && !timer2Up) {
return <Timer duration={6} setTimeUp={setTimer2Up}/>
}
The main way react uses to tell whether it needs to mount a new component or reuse an existing one is by the component's type. The first time this renders, you return a <Timer>, so react mounts a new Timer component, which then starts doing a countdown. Once the first countdown is done you render again and you also return a <Timer>. So as far as react can tell, the only thing that changed was the props on that timer. React keeps the same component mounted, with the same state.
So there are two options 1) force it to remount, or 2) let Timer reset if its props change
To force it to remount, you will need to use keys to make it clear to react that these are different elements. That way it will unmount the old timer and mount a new one, and that new one can have its own state that it counts down
if(!timer1Up) {
return <Timer key="first" duration={3} setTimeUp={setTimer1Up}/>
}
if(timer1Up && !timer2Up) {
return <Timer key="second" duration={6} setTimeUp={setTimer2Up}/>
}
To make it work with changing props, you'll need to add logic to reset the countdown. You'll have to decide what conditions should reset the countdown, but one option is that any time the duration changes, you start over:
const Timer = (props: TimerProps) => {
const [timeLeft, setTimeLeft] = useState(props.duration);
useEffect(() => {
setTimeLeft(props.duration);
const intervalId = setInterval(() => {
setTimeLeft(prev => {
const next = prev -1;
if (next === 0) {
clearInterval(intervalId);
// Need to slightly delay calling props.setTimeUp, because setting
// state in a different component while in the middle of setting
// state here can cause an error
setTimeout(() => props.setTimeUp(true));
}
return next;
});
}, 1000);
return () => { clearInterval(intervalId); }
}, [props.duration]); // <---- dependency array to reset when the duration changes
return <>{timeLeft} s</>
}
For more information on how react decides to mount/unmount components, see this page on reconciliation.

How to call a function every x seconds with updated state (React)

Im having a lot of trouble with this and i have tried various things. I want to call a function every second after i have clicked a start button and then have it paused after i click a stop button. I keep getting weird behaviour that i cant explain.
How can i do this in react without classes?
somethings i have treid:
const simulation = () => {
if (!running) {
console.log('hit');
return
} else {
// console.log(grid);
console.log('hey');
setTimeout(simulation, 1000)
}
}
and
enter setInterval(() => {
let newGrid = [...grid]
for (let i = 0; i < numRow; i++) {
for (let k = 0; k < numCol; k++) {
let n = 0;
}
}
console.log(grid);
}, 5000)
I have tried a lot more, In some cases it would update the state should i have added to it but not updated it after i reset the state.
How can i call a function to run every one second with updated values of state * Note the function that i want to run will update the state

You may do the following:
keep track of the current counter value along with the counter on/off state in your component state;
employ useEffect() hook to be called upon turning counter on/off or incrementing that;
within useEffect() body you may call the function, incrementing count by one (if ticking is truthy, hence timer is on) with delayed execution (using setTimeout());
once count variable is changed in the state, useEffect() gets called once again in a loop;
in order to clean up the timer upon component dismantle, you should return a callback, clearing the timer from useEffect()
const { useState, useEffect } = React,
{ render } = ReactDOM,
rootNode = document.getElementById('root')
const App = () => {
const [ticking, setTicking] = useState(true),
[count, setCount] = useState(0)
useEffect(() => {
const timer = setTimeout(() => ticking && setCount(count+1), 1e3)
return () => clearTimeout(timer)
}, [count, ticking])
return (
<div>
<div>{count}</div>
<button onClick={() => setTicking(false)}>pause</button>
<button onClick={() => setTicking(true)}>resume</button>
</div>
)
}
render (
<App />,
rootNode
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script><div id="root"></div>

Late reply but maybe interesting for some people.
Look at npm package cron. In this case every 15min As easy as:
const [job] = useState(new cron.CronJob("0 */15 * * * *",async ()=>{
await updateRiderCoords();
}));
useEffect(() => {
job.start();
}, []);

How to show every array object in react.js after specific time interval?

I have an array with 3 elements. I want to loop through it such that after 3 seconds the next element of array is rendered in place of the previous one and if last element is rendered then it should restart again. It's like after 3 seconds I want to display the next element in place of previous one as like looping through the array but showing one element at a time. I have tried the following code for it.
import React, { useEffect, useState } from 'react';
import './text.css';
const Text = () => {
var work = ["fighting", "learning", "qwerty"];
const [seconds, setSeconds] = useState(0);
useEffect(() => {
const interval = setInterval(() => {
if(seconds===2) setSeconds(seconds => seconds = 0);
else setSeconds(seconds => seconds + 1);
console.log(seconds);
}, 3000);
}, []);
return (
<div>
<h1>{work[seconds]}</h1>
</div>
);
}
export default Text;
It is successfully rendering elements one after another but can't render anything after the last element. Also on console the value of seconds is always showing 0.

The issue is that the initial state value is enclosed in the scope of the callback and never updates the state value in the outer scope, but defining the callback outside allows the state to update. Also, increment an index value instead and take the modulus of the array length to always get a valid index.
import React, { useEffect, useState } from "react";
const work = ["fighting", "learning", "qwerty"];
export default function App() {
const [index, setIndex] = useState(0);
useEffect(() => {
const tick = () => setIndex(i => i + 1);
const id = setInterval(tick, 3000);
return () => clearInterval(id);
}, []);
return (
<div>
<h1>{work[index % work.length]}</h1>
</div>
);
}

You were not getting the updated second value inside the setInterval.
Also, clearInterval in useEffect.
Working demo
Refactored code
useEffect(() => {
const interval = setInterval(() => {
setSeconds(second => (second === 2 ? 0 : second + 1));
}, 3000);
return () => clearInterval(interval)
}, []);
Update:
The console.log inside setInterval's callback will always be 0 because the seconds inside the setInterval's callback is the value taken when the callback was registered with setInterval.
To see up-to-date values of second, use another useEffect with seconds as dependency.
useEffect(() => {
console.log("seconds", seconds);
}, [seconds]);