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.

https://www.youtube.com/watch?v=2jJmSrqbBSo