Quiero agradecer a @Abdulmuhaymin por la información de hace un par de días sobre los trabajadores web en mi pregunta . Desafortunadamente, todavía no he logrado implementar los trabajadores web en mi cronómetro de reacción, así que probé de otra manera y parece funcionar. No estoy seguro de si esta es la forma correcta, por lo que los comentarios serían útiles. ¡Gracias por adelantado!

Agregué un useEffect más, e hice que el estado mSec y sec fuera independiente en su propio setInterval , y el estado min dependiera del useEffect de sec

 import { useState, useEffect } from "react"; export const SW = () => { const [mSec, setMSec] = useState(0); const [sec, setSec] = useState(0); const [min, setMin] = useState(0); const [isOn, setIsOn] = useState(false); const start = () => setIsOn(true); const stop = () => setIsOn(false); const reset = () => { setIsOn(false); setMin(0); setSec(0); setMSec(0); }; useEffect(() => { let ms; if (isOn) { ms = setInterval(() => setMSec((mSec) => mSec + 1), 10); } if (mSec === 100) { setMSec(0); } return () => clearInterval(ms); }, [mSec, isOn]); useEffect(() => { let s; if (isOn) { s = setInterval(() => setSec((sec) => sec + 1), 1000); } if (sec === 60) { setSec(0); setMin((min) => min + 1) } return () => clearInterval(s); }, [sec, isOn]); return ( <div> <p> {min.toString().padStart(2, "0")}:{sec.toString().padStart(2, "0")}: {mSec.toString().padStart(2, "0")} </p> {!isOn && <button onClick={start}>{!mSec ? "start" : "resume"}</button>} {isOn && <button onClick={stop}>stop</button>} <button disabled={!mSec} onClick={reset}> reset </button> </div> ); };

editar: me doy cuenta de que el movimiento de los minutos no parece estar relacionado con el movimiento de los segundos, así que muevo el setInterval de min al useEffect de sec y eliminé el useEffect de min

editar 2 : cambie la condición de restablecimiento de sec y mSec a 60 y 100