Estoy tratando de evitar que mi aplicación entre en useEffect hook e implemente lo que hay dentro en un período de 5 segundos, independientemente de la situación en la que la página se actualice o no.
Mi código aún solo activa el gancho useEffect solo en la actualización de la página. Realmente no importa si pasaron 5 segundos, se activa en cada actualización de la página y luego no hace nada durante una eternidad a menos que actualice la página nuevamente. Actúa como un gancho useEffect con una matriz de dependencias vacía.
¿Cómo puedo lograr que useEffect hook se ejecute cada 5 segundos, independientemente de que la página se actualice o no? Aquí está mi fragmento.
const localVisitTime = localStorage.getItem('localVisitTime'); const currentTime = new Date().getTime(); const timeDifference = currentTime - localVisitTime; const [ visitTime, setVisitTime ] = useState(localVisitTime); if (localVisitTime && timeDifference <= 5000) { // Do nothing, wait! } else { localStorage.setItem('localVisitTime', new Date().getTime()); setVisitTime(localVisitTime); } useEffect(() => { const fetchData = async () => { console.log('Data fetched!'); } fetchData(); }, [visitTime]);La razón por la que no se dispara varias veces es que la verificación de la diferencia horaria ocurre solo una vez, debe usar un intervalo establecido que verifique cada segundo si la hora es válida e intenta establecer la diferencia horaria en un estado, pero creo que no es necesario .
Creo que desea mantener esta activación de 5 segundos incluso entre actualizaciones de página, pero si no es crítico, siempre puede comenzar de nuevo cuando se actualiza la página. Creo que debería usar el intervalo establecido y no preocuparse por actualizaciones como esta.
const fetchData = async () => { console.log("Data fetched!"); }; useEffect(() => { fetchData(); const interval = setInterval(() => { fetchData(); }, 5000); return () => clearInterval(interval); }, []);De esta manera, la obtención de datos se ejecutará cada 5 segundos y se ejecutará en cada actualización.