Tengo un sitio web y quiero poner un reloj en tiempo real en una de las páginas. Escribí el código usando ganchos, pero entiendo que usar ganchos para tales casos es malo para el rendimiento debido a las representaciones en los estados cada segundo. ¿Existe una solución que requiera menos recursos?
import { useEffect, useState } from 'react' export default function Footer() { const [time, setTime] = useState() useEffect(() => { setInterval(() => { const dateObject = new Date() const hour = dateObject.getHours() const minute = dateObject.getMinutes() const second = dateObject.getSeconds() const currentTime = hour + ' : ' + minute + ' : ' + second setTime(currentTime) }, 1000) }, []) return <div>{time}</div> }Definitivamente es bueno que estés pensando en el rendimiento, sin embargo, en esta situación, no cambiaría nada. Para cambiar lo que se muestra en la pantalla (en este caso, el texto del reloj), el componente debe volver a renderizarse para reflejar el cambio en su estado, lo cual no es tan malo. Cada vez que el componente se vuelve a renderizar, no hará que el padre se vuelva a renderizar, por lo que en cuanto al rendimiento, lo estamos haciendo bien.