Mostrar la fecha y la hora correctas

Los marcos se preparan poco antes de mostrarse. Para que tu widget muestre la hora correcta, el reloj se adelanta hasta el momento en que se muestra tu marco. new Date() y Date.now() te dan ese momento, sin que tengas que hacer nada más:

import { useTimeZone } from "~lib/use-time-zone";

export const Widget = () => {
  const timeZone = useTimeZone();

  return (
    <h1>
      {new Date().toLocaleTimeString(undefined, {
        timeZone,
        hour: "2-digit",
        minute: "2-digit",
      })}
    </h1>
  );
};

Cuando formatees una hora, pasa siempre la zona horaria del marco, que te da useTimeZone. El navegador que dibuja tu widget no está en la zona horaria del marco, así que getHours(), o formatear sin timeZone, da una hora equivocada en el marco, aunque se vea bien en la vista previa.

Un marco preparado para la medianoche muestra la medianoche, y «hoy» es el día en que se muestra tu marco. En la vista previa del Estudio de widgets, es simplemente la hora actual.

new Date(...) con un valor, como una cadena de fecha que analizar, funciona como siempre.

Datos que obtienes

Tu widget obtiene sus datos cuando se prepara el marco, un poco antes de que se muestre. Casi siempre eso no cambia nada, pero una API que te da la previsión de «hoy» sin que le digas qué día es te dará la del día anterior en un marco preparado justo antes de la medianoche.

Pide el día que quieres, o elígelo entre los resultados con new Date():

import { useFetch } from "~lib/use-fetch";
import { useTimeZone } from "~lib/use-time-zone";

type Forecast = {
  readonly days: { readonly date: string; readonly high: number }[];
};

export const Widget = () => {
  const timeZone = useTimeZone();
  const { data } = useFetch<Forecast>(
    "https://api.example.com/forecast?days=2",
  );

  // El día en que se muestra tu marco, escrito como 2030-01-31 para que coincida con las fechas de la API.
  const today = new Date().toLocaleDateString("en-CA", { timeZone });
  const forecast = data.days.find((day) => day.date === today) ?? data.days[0];

  return <h1>{forecast.high}°</h1>;
};

Los hooks

Nunca necesitas un hook para leer la hora, pero tienes dos a mano para cuando quieras ser preciso:

• useScheduledDate te da el momento en que se muestra tu marco, para cuando quieras que tu código lo diga de forma explícita.
• useRenderDate te da la hora real a la que se está preparando tu marco, para esa rara API que compara una marca de tiempo que le envías con su propio reloj, como ocurre con una petición firmada.