Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

176
Vistas
How to show same countdown for everybody ReactJS?

i'm very novice, i trying make a countdown for reload the page every 15min for all users on my website. Actually is work but only for client side, i dont know how to do for make it "server side"

Like same countdown for everybody on website.

Maybe need to take servers side date ? but idk wow to do that .

import Countdown from "react-countdown";
import { useState, useEffect } from "react";
const twoDigits = (num) => String(num).padStart(2, '0')
// Renderer callback with condition
const renderer = ({ minutes, seconds, completed }) => {
    if (completed) {
        // Render a complete state
        return (window.location.reload(), []);
    } else {
        // Render a countdown
        return (
            <span>
                {twoDigits(minutes)}:{twoDigits(seconds)}
            </span>
        );
    }
};
const getLocalStorageValue = (s) => localStorage.getItem(s);

function RebaseCountdown() {
    const [data, setData] = useState(
        { date: Date.now(), delay: 900000, }
    );
    const wantedDelay = 900000;
    useEffect(() => {
        const savedDate = getLocalStorageValue("end_date");
        if (savedDate != null && !isNaN(savedDate)) {
            const currentTime = Date.now();
            const delta = parseInt(savedDate, 10) - currentTime;

            //Do you reach the end?
            if (delta > wantedDelay) {
                //Yes we clear our saved end date
                if (localStorage.getItem("end_date").length > 0)
                    localStorage.removeItem("end_date");
            } else {
                //No update the end date with the current date
                setData({ date: currentTime, delay: delta });

            }
        }
    }, []);
    return (
        <div>
            <Countdown
                date={data.date + data.delay}
                renderer={renderer}
                intervalDelay={3}
                autoStart={true}
                onStart={(delta) => {
                    //Save the end date
                    if (localStorage.getItem("end_date") == null)
                        localStorage.setItem(
                            "end_date",
                            JSON.stringify(data.date + data.delay)
                        );
                }}
                onComplete={() => {
                    if (localStorage.getItem("end_date") != null)
                        localStorage.removeItem("end_date");
                }}
            />
        </div>
    )
}

export default RebaseCountdown
about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda