Me pregunto cuál es la mejor manera de hacer un simple temporizador de cuenta regresiva de minutos/segundos para la próxima actualización. El accesorio de este componente se actualiza cada 5 minutos y cuenta regresivamente hasta la próxima actualización por segundo. Esto parece perder la sincronización bastante rápido. ¿Alguna idea?

No estoy seguro de si timeRemaining < 0 tiene sentido: si restamos 1000 de 1100, tendríamos 100 (¿cómo lo contabilizo?) Espero que haya una mejor manera. ¿Debo convertir esto de nuevo a segundos?

Gracias por cualquier comentario.

 ... const CountdownToNextRefresh = ({milliToNextRounded5Min}) => { const [, setCount] = useState(0); const [timeRemaining, setTimeRemaining] = useState(milliToNextRounded5Min); useEffect(() => { const oneSecond = 1000; const interval = setInterval(() => { setCount((prevCount) => prevCount + 1); setTimeRemaining(timeRemaining < 0 ? milliToNextRounded5Min : timeRemaining - oneSecond); }, oneSecond); return () => clearInterval(interval); }, [timeRemaining, milliToNextRounded5Min]); function msToTime(milliseconds) { // Get hours from milliseconds. const hoursFromMilli = milliseconds / (1000*60*60); const absoluteHours = Math.floor(hoursFromMilli); const h = absoluteHours > 9 ? absoluteHours : `0${absoluteHours}`; // Get remainder from hours and convert to minutes. const minutesfromHours = (hoursFromMilli - absoluteHours) * 60; const absoluteMinutes = Math.floor(minutesfromHours); const m = absoluteMinutes > 9 ? absoluteMinutes : `0${absoluteMinutes}`; // Get remainder from minutes and convert to seconds. const seconds = (minutesfromHours - absoluteMinutes) * 60; const absoluteSeconds = Math.floor(seconds); const s = absoluteSeconds > 9 ? absoluteSeconds : `0${absoluteSeconds}`; return h === "00" ? `${m}:${s}` : `${h}:${m}:${s}`; } return (<div>{msToTime(timeRemaining)}</div>) }