Esta es mi primera pregunta sobre stackoverflow. Actualmente estoy aprendiendo a reaccionar y traté de hacer un reloj en vivo que se actualice cada segundo. Logré realizar la actualización de html a través de un gancho useState() y un gancho useEffect() . Ahora, intenté imprimir la hora actual en la consola cuando se actualiza, pero la consola solo muestra la hora en que el sitio se actualizó por última vez.
Resultado: HTML continúa actualizándose correctamente pero la consola permanece al mismo tiempo.
¿Alguien podría explicarme qué estoy haciendo mal o cuál es la causa de este error?
Reloj.js:
import { render } from "@testing-library/react"; import React, { useState, useEffect } from 'react'; function Clock() { const [dateState, setDateState] = useState(new Date()); function updateFunc(){ setDateState(new Date()); console.log(dateState.toLocaleString('eu-DE', { second: 'numeric', minute: 'numeric', hour: 'numeric', })); } useEffect(() => { setInterval(() => updateFunc(), 1000); }, []); return ( <div className="App"> <p> {' '} {dateState.toLocaleDateString('eu-DE', { day: 'numeric', month: 'short', year: 'numeric', })} </p> <p> {dateState.toLocaleString('eu-DE', { hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: false, })} </p> </div> ); } export default Clock;Si no me equivoco, dado que useEffect no tiene dependencias, la devolución de llamada nunca cambia. La devolución de llamada tiene su propio alcance y las variables ( dateState ), por eso nunca cambia.
Si pasa una matriz vacía ([]), los accesorios y el estado dentro del efecto siempre tendrán sus valores iniciales
La solución es agregar updateFunc a la lista de dependencias de useEffect . Luego, deberá envolver updateFunc con useCallback con dateState como una dependencia.
Nota: cuando el componente se suscribe a un controlador sin fin (por ejemplo setInterval o socket), es mejor darse de baja usando lafunción de limpieza .
function Clock() { const [dateState, setDateState] = useState(new Date()); const updateFunc = useCallback(() => { setDateState(new Date()); console.log( dateState.toLocaleString("eu-DE", { second: "numeric", minute: "numeric", hour: "numeric" }) ); }, [dateState]); useEffect(() => { const interval = setInterval(() => updateFunc(), 1000); return () => clearInterval(interval); }, [updateFunc]); return ( <div className="App"> <p> {" "} {dateState.toLocaleDateString("eu-DE", { day: "numeric", month: "short", year: "numeric" })} </p> <p> {dateState.toLocaleString("eu-DE", { hour: "numeric", minute: "numeric", second: "numeric", hour12: false })} </p> </div> ); }