Reset countdown timer in on button click in react - reactjs

Question

i have this code basically a kind of quiz app. I want to do rest timer when user click on next or previous button. Need help for this. We can do that by creating only single component and create one of state as reset but in that case every second main page get re-render.
const CalcTimeLeft = () => {
const [time, setTime] = useState(300000);
useEffect(() => {
setTimeout(() => {
setTime(time - 1000);
}, 1000);
}, [time]);
const timeLeft = {
minutes: Math.floor(time / 60 / 1000) % 60,
seconds: Math.floor(time / 1000) % 60
};
return <div>{`${timeLeft.minutes}:${timeLeft.seconds}`}</div>;
};
export default function App() {
const [currPage, setCurrpage] = useState(1);
const question = [
];
const handleNext = () => {
setCurrpage(currPage + 1);
};
const handlePrev = () => {
setCurrpage(currPage - 1);
};
let item_per_page = 1;
let total_page = Math.floor(question.length / item_per_page);
const data = question.splice((currPage - 1) * item_per_page, item_per_page);
return (
<div className="App">
{data.map((data) => {
return <div>{data.question}</div>;
})}
<CalcTimeLeft />
{currPage !== total_page && <button onClick={handleNext}>Next</button>}
{currPage !== 1 && (
<button onClick={() => setCurrpage(handlePrev)}>Previous</button>
)}
</div>
);
}

Answer 1

You can bubble the reset event in the CalcTimeLeft component.
const CalcTimeLeft = () => {
const [time, setTime] = useState(300000);
const resetTime = () => {
setTime(300000);
};
useEffect(() => {
setTimeout(() => {
setTime(time - 1000);
}, 1000);
}, [time]);
return { resetTime };
};
export default function App() {
const [currPage, setCurrpage] = useState(1);
const question = [];
const { resetTime } = CalcTimeLeft();
const handleNext = () => {
resetTime;
setCurrpage(currPage + 1);
};
const handlePrev = () => {
resetTime;
setCurrpage(currPage - 1);
};
const timeLeft = {
minutes: Math.floor(time / 60 / 1000) % 60,
seconds: Math.floor(time / 1000) % 60,
};
let item_per_page = 1;
let total_page = Math.floor(question.length / item_per_page);
const data = question.splice((currPage - 1) * item_per_page, item_per_page);
return (
<div className="App">
{data.map((data) => {
return <div>{data.question}</div>;
})}
<div>{`${timeLeft.minutes}:${timeLeft.seconds}`}</div>
{currPage !== total_page && <button onClick={handleNext()}>Next</button>}
{currPage !== 1 && <button onClick={handlePrev()}>Previous</button>}
</div>
);
}