Configurar el temporizador de cuenta regresiva en React

Las aplicaciones web modernas creadas en React a menudo implican realizar un seguimiento del tiempo. Por ejemplo, si tiene un blog, cada publicación debe mostrar su fecha y cuánto tiempo ha pasado desde la publicación.

Las aplicaciones React pueden tener un conjunto diverso de características. Implementar un temporizador de cuenta regresiva en JavaScript puede ser bastante difícil. Implica manipular valores de fecha o formatearlos.

Veamos una implementación de muestra de una cuenta regresiva en la aplicación React.

Implementación del temporizador de cuenta regresiva en React

En general, los temporizadores de cuenta regresiva en todos los marcos de React están estructurados de la misma manera. Los componentes son los principales bloques de construcción de las aplicaciones React.

Construiremos un componente funcional para el temporizador de cuenta regresiva en este ejemplo. Usaremos ganchos para mantener el estado y controlar los efectos secundarios.

Use los ganchos useState() y useEffect() para configurar el temporizador de cuenta regresiva en React

Los componentes funcionales de React pueden tener diferentes estructuras, pero todos siguen el mismo patrón básico. Configuremos una función y llamémosla Countdown.

Presumiblemente, utilizará este componente dentro de un componente principal, por lo que también deberíamos aceptar props.

export default function Countdown(props){
    return (
    <div>
    {!(mins && secs) ? "" : (
        <p>
          {" "}
          {mins}:{secs < 10 ? `0${secs}` : secs}
        </p>
      )}    
    </div>
    )
}

Hasta ahora, esto es muy simple. Vamos a obtener valores iniciales de minutos y segundos de los accesorios. Si no hay minutos y segundos para la cuenta regresiva, no hay temporizador para mostrar una cadena vacía.

Si los valores están disponibles, es mejor mostrar siempre los segundos en dos dígitos para mantener la coherencia del formato, incluso si se trata de un número de un solo dígito. Logramos eso usando la plantilla literal dentro de las llaves.

Como podemos ver, los valores de mins y secs están desestructurados, por lo que nuestro próximo paso será hacer eso. También mencionamos que vamos a necesitar ganchos useState() y useEffect(). El primero será necesario para realizar un seguimiento de los tiempos cambiantes.

Si estuviéramos trabajando con componentes de clase, usaríamos métodos de bucle de vida para manejar el cambio de tiempo. Podemos usar los ganchos useEffect() para componentes funcionales con muchas características de métodos de bucle de vida.

Entonces, sin más preámbulos, introduzcamos los ganchos en nuestra aplicación:

import React from "react";
import { useState, useEffect } from "react";
export default function Countdown(props){
  const { startingMinutes = 0, startingSeconds = 0 } = props;
  const [mins, setMinutes] = useState(startingMinutes);
  const [secs, setSeconds] = useState(startingSeconds);
    return (
    <div>
    {!(mins && secs) ? "" : (
        <p>
          {" "}
          {mins}:{secs < 10 ? `0${secs}` : secs}
        </p>
      )}    
    </div>
    )
}

Tenemos que empezar a importar los ganchos useState y useEffect de la biblioteca central.

Hasta ahora, las variables de estado mins y secs están configuradas en 0, por lo que no vamos a ver nada en la pantalla. Sin embargo, si cambia los valores startingMinutes y startingSeconds de los props, verá un punto de inicio de una cuenta regresiva. En el código anterior, también definimos funciones para actualizar el estado.

La esencia de una cuenta regresiva es deducir un cierto valor de tiempo periódicamente. Para eso, vamos a necesitar el método setInterval(). Ejecuta una pieza de código una vez cada cantidad de tiempo especificada.

En este caso, con cada segundo que pasa, debemos disminuir los segundos totales en 1. Una vez cada 60 segundos, también debemos disminuir los minutos iniciales en 1.

Nuestra aplicación terminada se verá así:

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

export default function Countdown(props) {
  const { startingMinutes = 111, startingSeconds = 0 } = props;
  const [mins, setMinutes] = useState(startingMinutes);
  const [secs, setSeconds] = useState(startingSeconds);
  useEffect(() => {
    let sampleInterval = setInterval(() => {
      if (secs > 0) {
        setSeconds(secs - 1);
      }
      if (secs === 0) {
        if (mins === 0) {
          clearInterval(sampleInterval);
        } else {
          setMinutes(mins - 1);
          setSeconds(59);
        }
      }
    }, 1000);
    return () => {
      clearInterval(sampleInterval);
    };
  });

  return (
    <div>
      {!(mins && secs) ? "" : (
        <p>
          {" "}
          {mins}:{secs < 10 ? `0${secs}` : secs}
        </p>
      )}
    </div>
  );
}

Hay mucho que desempacar aquí. Primero, expliquemos la lógica de nuestra devolución de llamada setInterval() ya que este es el código que se ejecutará una vez cada cantidad de tiempo especificada.

Primero, comprobamos si el valor del estado secs es mayor que 0, y si lo es, actualizamos el estado con el valor secs - 1. Es prácticamente la funcionalidad principal de nuestra cuenta regresiva.

El siguiente paso define lo que debería suceder si los segs y los mins son 0. En este caso, cancelamos la ejecución repetida del código llamando a la función clearInterval().

Finalmente, en la declaración else, manejamos el caso cuando los segundos han llegado a 0, pero todavía hay minutos para deducir.

La función de devolución de llamada es el primer argumento. Contiene la pieza de código que debe ejecutarse repetidamente.

En nuestro ejemplo, escribimos una función en línea, pero podríamos haberla escrito por separado y hacer referencia a ella en nuestro método setInterval(), así:

setInterval(someFunction, 1000)

El segundo argumento en ese ejemplo, así como en la muestra original, se refiere a la demora. Especifica cuánto tiempo debe esperar la función setInterval() entre las ejecuciones del código.

El valor de tiempo se especifica en milisegundos. En nuestro ejemplo, queremos que el temporizador de cuenta regresiva se ejecute cada segundo, 1000 milisegundos.

Finalmente, el valor de retorno del enlace useEffect() se usa comúnmente para limpiar suscripciones y cancelar funciones repetitivas como setInterval(). En nuestro ejemplo, hacemos exactamente eso y llamamos a clearInterval() al ejecutar nuestra función de devolución de llamada sampleInterval().