Mostrare la data e l’ora giuste

Le cornici vengono preparate poco prima di aggiornarsi. Perché il tuo widget mostri l’ora giusta, l’orologio viene portato avanti al momento in cui la tua cornice si aggiorna. new Date() e Date.now() ti danno quel momento, senza che tu debba fare altro:

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>
  );
};

Quando formatti un orario, passa sempre il fuso orario della cornice, che ottieni da useTimeZone. Il browser che disegna il tuo widget non si trova nel fuso orario della cornice, quindi getHours(), o una formattazione senza timeZone, dà l’ora sbagliata sulla cornice, anche quando nell’anteprima sembra giusta.

Una cornice preparata per mezzanotte mostra mezzanotte, e «oggi» è il giorno in cui la tua cornice si aggiorna. Nell’anteprima dello Studio dei widget è semplicemente l’ora attuale.

new Date(...) con un valore, come una stringa di data da analizzare, funziona come al solito.

I dati che recuperi

Il tuo widget recupera i dati quando la cornice viene preparata, poco prima che si aggiorni. Quasi sempre non fa differenza, ma un’API che ti dà le previsioni «di oggi» senza che le si dica il giorno ti restituisce quelle del giorno prima per una cornice preparata poco prima di mezzanotte.

Chiedi il giorno che ti serve, oppure sceglilo tra i risultati 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",
  );

  // Il giorno in cui la tua cornice si aggiorna, scritto come 2030-01-31 per corrispondere alle date dell’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>;
};

Gli hook

Per leggere l’ora non ti serve mai un hook, ma ce ne sono due per quando vuoi più precisione:

• useScheduledDate restituisce il momento in cui la tua cornice si aggiorna, per quando vuoi che il tuo codice lo dica in modo esplicito.
• useRenderDate restituisce l’ora reale in cui la tua cornice viene preparata, per quelle rare API che confrontano un timestamp che invii con il proprio orologio, come nel caso di una richiesta firmata.