Componente React crônometro

cronometro.jsx

/*CÓDIGO MELHORADO CHATGPT*/
import React, { useState, useEffect, useRef } from "react";
import Calendar from "../../images/calendar.png";

const CronometroDecrescente = () => {
  const dataFinal = new Date("2023-12-28T23:59:59");
  const [tempoRestante, setTempoRestante] = useState(calcularTempoRestante());
  const intervaloRef = useRef(null);

  function calcularTempoRestante() {
    const agora = new Date();
    const diferenca = dataFinal - agora;

    if (diferenca <= 0) {
      //clearInterval(intervaloRef.current);
      return { dias: "00", horas: "00", minutos: "00", segundos: "00" };
    }

    const dias = Math.floor(diferenca / (1000 * 60 * 60 * 24));
    const horas = Math.floor(
      (diferenca % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
    );
    const minutos = Math.floor((diferenca % (1000 * 60 * 60)) / (1000 * 60));
    const segundos = Math.floor((diferenca % (1000 * 60)) / 1000);

    return {
      dias: dias.toString().padStart(2, "0"),
      horas: horas.toString().padStart(2, "0"),
      minutos: minutos.toString().padStart(2, "0"),
      segundos: segundos.toString().padStart(2, "0"),
    };
  }

  useEffect(() => {
    intervaloRef.current = setInterval(() => {
      setTempoRestante(calcularTempoRestante());
    }, 1000);

    return () => {
      clearInterval(intervaloRef.current);
    };
  }, []); // Adiciona um array vazio como dependência para garantir que o useEffect execute apenas uma vez

  return (
    <div id="container-cronometro" className="container-fluid">
      <div className="row">
        <div id="cronometro" className="col-md-6" style={{ textAlign: "right" }}>
          <div className="cronometro-container">
            <div className="cronometro-item">
              <span className="cronometro-value">{tempoRestante.dias}</span>
              <span className="cronometro-unit">Dias</span>
            </div>
            <div className="cronometro-item">
              <span className="cronometro-value">{tempoRestante.horas}</span>
              <span className="cronometro-unit">Horas</span>
            </div>
            <div className="cronometro-item">
              <span className="cronometro-value">{tempoRestante.minutos}</span>
              <span className="cronometro-unit">Min</span>
            </div>
            <div className="cronometro-item">
              <span className="cronometro-value">{tempoRestante.segundos}</span>
              <span className="cronometro-unit">Seg</span>
            </div>
          </div>
        </div>
        <div className="col-md-6">
          <br />
          <span className="span-cronometro-header">
            <img src={Calendar} width="24" alt={Calendar} /> Não perca tempo! Votação válida até 15/12
          </span>
        </div>
      </div>
    </div>
  );
};

export default CronometroDecrescente;
/*CÓDIGO MELHORADO CHATGPT*/

/*CÓDIGO ANTERIOR*/
import React, { useState, useEffect } from "react";

const CronometroDecrescente = () => {
  const dataFinal = new Date("2023-12-15T23:59:59");
  const [tempoRestante, setTempoRestante] = useState(calcularTempoRestante());

  function calcularTempoRestante() {
    const agora = new Date();
    const diferenca = dataFinal - agora;

    const dias = Math.floor(diferenca / (1000 * 60 * 60 * 24));
    const horas = Math.floor(
      (diferenca % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
    );
    const minutos = Math.floor((diferenca % (1000 * 60 * 60)) / (1000 * 60));
    const segundos = Math.floor((diferenca % (1000 * 60)) / 1000);

    return {
      dias: dias.toString().padStart(2, "0"),
      horas: horas.toString().padStart(2, "0"),
      minutos: minutos.toString().padStart(2, "0"),
      segundos: segundos.toString().padStart(2, "0"),
    };
  }

  useEffect(() => {
    const intervalo = setInterval(() => {
      setTempoRestante(calcularTempoRestante());
    }, 1000); // Atualiza a cada segundo

    return () => clearInterval(intervalo);
  }, []);