Timer with react hooks doesn't update after re-rendering - reactjs

Question

I'm creating a timer with React hooks. It's a simple component that is used in a quiz. Each question has a defined duration so the timer should start at this duration and start decreasing one second at a time. My problem is that the component does what is supposed to do, but when I go to the next question the state doesn't initialize to the duration passed in the props but continues with the counter...
const Timer = ({ duration }) => {
const [counter, setCounter] = useState(duration);
const timer = useRef();
debugger;
console.log("counter: " + counter);
const setTimer = () => {
if (counter <= duration) {
setCounter(counter - 1);
}
};
// Similar to componentDidMount and componentDidUpdate:
useEffect(() => {
timer.current = setTimeout(() => setTimer(), 1000);
return () => {
if (timer.current) {
console.log("ClearInterval in Timer");
clearTimeout(timer.current);
}
};
}, [counter]);
return (
<div>
<p>time left {counter} seconds</p>
</div>
);
};
export default Timer;
I'm rendering the Timer component from the Card component:
import React from "react";
import QuizButton from "../QuizButton/QuizButton";
import Timer from "../Timer/Timer";
import "./styles.css";
const QuizQuestion = ({ question, responses, checkAnswerFn, duration }) => (
<article className='card'>
<header>
<Timer duration={duration} />
</header>
<div>
<p>{question}</p>
</div>
<footer>
{responses.map((response, i) => {
return (
<QuizButton key={i} onClick={checkAnswerFn(response)}>
{response}
</QuizButton>
);
})}
</footer>
</article>
);
export default QuizQuestion;
Does anyone know why the state is not initialized to duration after the question re-renders?

Answer 1

Look a bit complex to drive you how and why your code is not working as expected, but here is a working example just did it today, hope it helps to point you in the right direction:
const [counter, setCounter] = useState(15000);
...
useEffect(() => {
const myInterval = () => {
if (counter > 1000) {
setCounter(state => state - 1000)
} else if (counter !== 0){
setCounter(0);
clearInterval(interval);
}
}
const interval = setInterval(myInterval, 1000);
return () => {
clearInterval(interval)
}
}, [counter]);
...
console.log(counter); // 15000, 14000, 13000, ...

Answer 2

The condition in the setTimer function is not allowing the counter to initialize. Let your function decrement the counter until and unless the counter value is greater than 0 otherwise initialize it with the duration. Replace your function with the following, it will help you initialize the timer back to the duration.
const setTimer = () => {
setCounter(counter > 0 ? counter - 1 : duration);
};

Answer 3

UPDATED 2 - Added Question Array and Question based timer data
UPDATED 1 - I THINK IT WORKS NOW AS YOUR WISH TO TO BE LIKE
Summary - I have lifted some states up.
So the edited answer is: Since we need to resend new prop data to the Child Timer component while the trigger was based on the child component which I have demonstrated using a click from the child Timer component, we passed a function from the parent Question component to the child component which would be called on an onClick listener via the prop. Therefore the function updates the parent's (Question.js) state re-rendering the child (Timer.js) and passing new prop values whichever we have set as new. Rather than relaying on timer based change we also changed to data based trigger like the Question Data changed to invoke the useEffect.
I hope the explanation works and and solved your use case.
..
//Question.js
import React, { useState, useEffect } from "react";
import Timer from "./Timer";
import "./styles.css";
const Question = () => {
const questionPool = [
{ number: 1, text: "lorem", timer: 6 },
{ number: 2, text: "lorem", timer: 10 },
{ number: 3, text: "lorem", timer: 20 },
{ number: 4, text: "lorem", timer: 3 },
{ number: 5, text: "lorem", timer: 12 }
];
const [countDown, setCountDown] = useState(questionPool[0].timer);
const [currentQuestion, setCurrentQuestion] = useState(
questionPool[0].number
);
const resetCount = (newQuestion) => {
newQuestion < questionPool.length + 1
? setCurrentQuestion(newQuestion)
: setCurrentQuestion(1);
};
useEffect(() => {
if (questionPool[currentQuestion]) {
setCountDown(questionPool[currentQuestion].timer);
} else {
setCountDown(questionPool[0].timer);
}
}, [currentQuestion]);
return (
<>
<Timer
duration={countDown}
resetCountDown={resetCount}
questionNumber={currentQuestion}
/>
</>
);
};
export default Question;
....
//Timer.js
import React, { useEffect, useState } from "react";
import "./styles.css";
const Timer = ({ duration, resetCountDown, questionNumber}) => {
const [counter, setCounter] = useState(duration);
let interval = null;
useEffect(() => {
const myInterval = () => {
if (counter > 1) {
setCounter((state) => state - 1);
} else if (counter !== 0) {
setCounter(0);
clearInterval(interval);
}
};
interval = setInterval(myInterval, 1000);
return () => {
clearInterval(interval);
};
}, [counter]);
useEffect(() => {
if (!interval) {
setCounter(duration);
}
}, [questionNumber]);
return (
<div>
<p>
time left {counter} seconds For Question: {questionNumber}
</p>
<button type="button" onClick={() => resetCountDown(questionNumber + 1)}>
next
</button>
</div>
);
};
export default Timer;
CodeSandbox Extending from #Adolfo Onrubia to match your use case
Check if this helps.
********* DEPRECATED BELOW *******************
If you still want to dynamically add timer component, I think you need to push in a whole react component in the prop and have the component which is pushing a new component re-render so the child will render itself and a new question with a new component can appear.
In short,
Your QuestionsArray[{OBJECT WITH QUESTION DETAILS}] is in your main app.
Your have a useState like :
const [currentQuestion, setCurrentQuestion] =
useState(QuestionArray[0]);
And whenever a next button is pushed. You do
setCurrentQeustion(QuestionArray[NewIndex]);
Thus your master component App Components' State re-renders on useEffect of currentQuestion and passes that to the Timer.js/child component causing it to rerender with new Timeout duration.
It may also be worthwhile to check on props.children so rather than just sending as a regular prop you pass as template like.
<Template>
{currentQuestion}
</Template>

Answer 4

Thanks to Fauzul and Adolfo, I finally solved my issue.
I pass the id of the question to the props of the timer, and using the useEffect hook, everytime the id changes the counter gets updated to the duration...
QuizQuestion.js
import React from "react";
import PropTypes from "prop-types";
import QuizButton from "../QuizButton/QuizButton";
import Timer from "../Timer/Timer";
import "./styles.css";
const QuizQuestion = ({ question, responses, checkAnswerFn, duration, id }) => (
<article className='card'>
<header>
<Timer duration={duration} id={id} />
</header>
<div>
<p>{question}</p>
</div>
<footer>
{responses.map((response, i) => {
return (
<QuizButton key={i} onClick={checkAnswerFn(response)}>
{response}
</QuizButton>
);
})}
</footer>
</article>
);
QuizQuestion.propTypes = {
question: PropTypes.string.isRequired,
responses: PropTypes.array.isRequired,
checkAnswerFn: PropTypes.func.isRequired,
};
export default QuizQuestion;
Timer.js
import React, { useState, useEffect, useRef } from "react";
import PropTypes from "prop-types";
const Timer = ({ duration, id }) => {
const [counter, setCounter] = useState(duration);
const timer = useRef();
const setTimer = () => {
if (counter > 0) {
setCounter(counter - 1);
}
};
// Similar to componentDidMount and componentDidUpdate:
useEffect(() => {
timer.current = setTimeout(() => setTimer(), 1000);
return () => {
if (timer.current) {
clearTimeout(timer.current);
}
};
}, [counter]);
useEffect(() => {
setCounter(duration);
}, [id]);
return (
<div>
<p>time left {counter} seconds</p>
</div>
);
};
Timer.propTypes = {
duration: PropTypes.number.isRequired,
id: PropTypes.number.isRequired,
};
export default Timer;