Skip to main content
2 de 2
Ya se añadió el código del componente.

Cuando estableces que el estado sea defaultState, estás estableciendo un valor estático de new Date() a la propiedad fecha, donde tomará el valor del momento en que se llamó (o sea, en el useState). En el interval, solo estás llamando al updateUser y, por ende, reemplazas los mismos valores estáticos al estado (menos edad que le sumas 1). Puedes obtener lo que buscas y minimizar líneas de código usando dentro de useEffect el setUser en su versión de arrow function junto al spread operator ya que buscas setear el nuevo estado usando el estado anterior. (En la doc oficial de React se encuentra esto). Tu useEffect quedaría así:

const ClockFunction = () => {
  const defaultState = {
    fecha: new Date(),
    edad: 0,
    nombre: 'Juan',
    apellidos: 'Martinez',
  }
  const [user, setUser] = useState(defaultState)

  useEffect(() => {
    const intervalAge = setInterval(() => {
      setUser((curr) => ({
        ...curr,
        edad: curr.edad + 1,
        fecha: new Date(),
      }))
    }, 1000)
    return () => {
      clearInterval(intervalAge)
    }
  })

  return (
    <div>
      <h2>
        Hora Actual:
        {user.fecha.toLocaleTimeString()}
      </h2>
      <h3>
        {user.nombre} {user.apellidos}
      </h3>
      <h4>Edad: {user.edad}</h4>
    </div>
  )
}