Tutorial Contador Automático con React.js
Como crear un contador automático con React.js
Vamos a crear un contador automático para usarlo como referencia antes de pasar a las máquinas de estado con react.js
En tutorial usaremos los hooks
de react, vamos a ver un ejemplo sencillo con un simple cambio de variable de estado.
Demostración
Código funcionando
A continuación el código funcional del componente, el cual lo puedes importar en cualquier proyecto de react web, si bien que utilice create-react-app o nuestro kit base de react con vite.
import { useEffect, useState } from "react";
const Timer = () => {
const [time, setTime] = useState(0);
const [status, setStatus] = useState('stopped');
const handleStart = () => {
setStatus('started');
};
const handleStop = () => {
setStatus('stopped');
}
useEffect(() => {
if(status === 'started') {
setTime(0);
setTime((time) => time + 1 );
const interval = setInterval(() => {
setTime((time) => time + 1 );
}, 1000);
return () => {
clearInterval(interval);
}
}
}, [status])
return (<div>
<div>
{time}
</div>
<br />
<button onClick={handleStart}>Iniciar</button>
<button onClick={handleStop}>Detener</button>
</div>);
};
export { Timer };
Explicación del código
Los botones manejan las funciones handleStart
y handleStop
los cuales cambian el valor de una variable
const handleStart = () => {
setStatus('started');
};
const handleStop = () => {
setStatus('stopped');
}
Estos valores son registrados por el hook de efecto useEffect
y al cambiar ejecuta el código que contiene, en este caso solo reacciona al valor started
useEffect(() => {
if(status === 'started') {
setTime(0);
setTime((time) => time + 1 );
const interval = setInterval(() => {
setTime((time) => time + 1 );
}, 1000);
return () => {
clearInterval(interval);
}
}
}, [status])
Algo a denotar aquí es el uso de clearInterval
el cual es necesario y se ejecuta en la etapa de limpieza del efecto, cada que useEffect
determina que cambió la variable ejecuta la etapa de limpieza y vuelve a ejecutar el código que contiene.
Para más información ver el ciclo de vida de los hooks:
https://wavez.github.io/react-hooks-lifecycle/
Epilogo
Este es el código previo para implementar una máquina de estado, la cual estará implementando en otra publicación, pero mientras les dejo el video del tutorial en Youtube.