Implement Timer using React - reactjs

Question

import React from 'react';
import { nanoid } from 'nanoid';
import Confetti from 'react-confetti';
import { useStopwatch } from 'react-timer-hook';
import Die from './components/Die';
import './style.css';
import Timer from './components/Timer';
import Rolls from './components/rolls';
function App() {
const { seconds, minutes, hours, isRunning, start, pause, reset } =
useStopwatch({ autoStart: true });
const [dice, setDice] = React.useState(allNewDice());
const [tenzies, setTenzies] = React.useState(false);
const [time, setTime] = React.useState({});
const [hasStarted, setHasStarted] = React.useState(() => false);
const [bestTime, setBestTime] = React.useState(() =>
localStorage.getItem('best-time')
? JSON.parse(localStorage.getItem('best-time'))
: ''
);
React.useEffect(() => {
setTime({ seconds: seconds, minutes: minutes, hours: hours });
}, [seconds, minutes, hours]);
React.useEffect(() => {
const firstValue = dice[0].value;
const allHeld = dice.every((die) => die.isHeld === true);
const allEqual = dice.every((die) => die.value === firstValue);
if (allEqual && allHeld) {
setTenzies(true);
//if (time < bestTime || !bestTime) {
// setBestTime(time);
// localStorage.setItem('best-time', time);
//}
}
}, [dice]);
function generateNewDie() {
return { value: Math.ceil(Math.random() * 6), isHeld: false, id: nanoid() };
}
function allNewDice() {
const newDice = [];
for (let i = 0; i < 10; i++) {
newDice.push(generateNewDie());
}
return newDice;
}
function rollDice() {
if (!tenzies) {
setDice((oldDice) =>
oldDice.map((die) => {
return die.isHeld === true ? die : generateNewDie();
})
);
} else {
setTenzies(false);
setDice(allNewDice());
}
}
function holdDice(id) {
setDice((oldDice) =>
oldDice.map((die) => {
return die.id === id ? { ...die, isHeld: !die.isHeld } : die;
})
);
}
const diceElements = dice.map((die) => (
<Die
key={die.id}
value={die.value}
isHeld={die.isHeld}
holdDice={() => holdDice(die.id)}
/>
));
return (
<main>
{tenzies && <Confetti />}
<h1 className="title">Tenzies</h1>
<p className="instructions">
Roll until all dice are the same. Click each die to freeze it at its
current value between rolls.
</p>
<div className="dice-container">{diceElements}</div>
<div className="row">
<div className="total-timer">
<Timer best={true} timer={time} />
<Timer timer={time} />
</div>
<button type="button" className="roll-dice" onClick={rollDice}>
{tenzies ? 'New Game' : 'Roll'}
</button>
<div className="total-rolls">
<Rolls best={true} />
<Rolls />
</div>
</div>
</main>
);
}
export default App;
Is it a good practice having Effect Hook render my page every second of the timer??
Timer
export default function Timer(props) {
const styles = {
color: props.best ? '#59e391' : 'white',
};
return (
<div className="timer" style={styles}>
{props.best ? <span>Best Time : </span> : <span>Your Time : </span>}
<span className="digits">
{props.timer.hours ? props.timer.hours : '00'}
</span>
<span>:</span>
<span className="digits">
{props.timer.minutes ? props.timer.minutes : '00'}
</span>
<span>:</span>
<span className="digits">
{props.timer.seconds ? props.timer.seconds : '00'}
</span>
</div>
);
}