useChronometer

useChronometer, que gestiona un cronómetro con funciones para iniciar, detener y reiniciar. Utiliza estado y refs para seguir el tiempo y limpiar temporizadores al desmontarse.

import { useEffect, useState, useRef } from "react";

const stateInitChronometer = "0:00:00";

export const useChronometer = () => {
	const [chronometerDisplay, setChronometerDisplay] = useState(stateInitChronometer);
	const [chronometerTime, setChronometerTime] = useState(0);
	const [millisecondsNumber, setMillisecondsNumber] = useState(0)

	const isStartChronometer = useRef(false);

	const starNewDate = useRef(null);

	const minutesRef = useRef(0);
	const secondsRef = useRef(0);
	const millisecondsRef = useRef(0);

	const timeoutId = useRef(null);

	const getFormatt = (remaining) => {
		const minutes = Math.floor(remaining / (1000 * 60));
		const seconds = Math.floor((remaining % (1000 * 60)) / 1000);
		const milliseconds = remaining % 1000;

		return `${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}:${milliseconds}`;
	};

	const updateStateChronometer = () => {
		const remaining = new Date().getTime() - starNewDate.current;

		const formattedTime = getFormatt(remaining);

		setChronometerDisplay(formattedTime);

		timeoutId.current = setTimeout(updateStateChronometer, 100);
	};

	const playChronometer = () => {
		if (isStartChronometer.current) {
			return;
		}
		starNewDate.current = new Date().getTime();
		isStartChronometer.current = true;
		updateStateChronometer();
	};

	const stopChronometer = () => {
		if(isStartChronometer.current === false){
			return
		}
		isStartChronometer.current = false;
		clearTimeout(timeoutId.current);
		setMillisecondsNumber(new Date().getTime() - starNewDate.current)
		const formattedTime = getFormatt(new Date().getTime() - starNewDate.current);
		setChronometerTime(formattedTime);
	};

	const resetChronometer = () => {
		isStartChronometer.current = false;
		minutesRef.current = 0;
		secondsRef.current = 0;
		millisecondsRef.current = 0;
		setChronometerDisplay(stateInitChronometer);
		clearTimeout(timeoutId.current);
	};

	useEffect(() => {
		return () => {
			clearTimeout(timeoutId.current);
		};
	}, []);

	return {
		chronometerDisplay,
		chronometerTime,
		millisecondsNumber,
		playChronometer,
		stopChronometer,
		resetChronometer,
	};
};

Ejemplo de uso

chronometerDisplay = este es mostrar en tiempo real

chronometerTime = este se guarda en la base con la misma estructura del display

millisecondsNumber = el numero total en milisegundos

function App() {
  const { chronometerDisplay, chronometerTime, millisecondsNumber, playChronometer, resetChronometer, stopChronometer } = useChronometer();
  return (
    <>
     <p>Hooks</p>
     <p>{chronometerDisplay}</p>
     <p>{chronometerTime}</p>
     <p>{millisecondsNumber}</p>
     <button onClick={playChronometer}>play</button>
     <button onClick={stopChronometer}>stop</button>
     <button onClick={resetChronometer}>reset</button>
    </>
  )
}

export default App