72Empezar
HextaUI

useToday

La fecha de hoy, que se actualiza a medianoche y cuando la pestaña vuelve a primer plano, sin discrepancia de hidratación.

"use client"

import { Skeleton } from "@/components/ui/skeleton"
import { useToday } from "@/hooks/use-today"

const formatter = new Intl.DateTimeFormat(undefined, { dateStyle: "full" })

function daysUntilNewYear(today: Date) {
  const next = new Date(today.getFullYear() + 1, 0, 1)
  return Math.round((next.getTime() - today.getTime()) / 86_400_000)
}

export function UseTodayDemo() {
  const today = useToday()

  return (
    <div className="flex flex-col items-center gap-1 text-center">
      {today ? (
        <>
          <p className="text-lg font-medium">{formatter.format(today)}</p>
          <p className="text-sm text-muted-foreground">
            {daysUntilNewYear(today)} days until New Year
          </p>
        </>
      ) : (
        <>
          <Skeleton className="h-6 w-56" />
          <Skeleton className="mt-1 h-4 w-36" />
        </>
      )}
    </div>
  )
}

Instalación

pnpm dlx shadcn@latest add https://hextaui.com/r/use-today.json

Añade el hook y todo lo que necesita a tu proyecto.

Uso

import { useToday } from "@/hooks/use-today"
const today = useToday()

if (!today) {
  return <Skeleton className="h-5 w-40" />
}

return <p>{format(today, "PPPP")}</p>

Recurre a él siempre que un componente dependa de la fecha actual, como resaltar hoy, deshabilitar días pasados o hacer una cuenta atrás hasta una fecha límite.

Por qué no new Date()

const today = new Date()

Leer la fecha durante el renderizado falla de dos maneras:

  • Discrepancias de hidratación. El servidor renderiza en su zona horaria, posiblemente horas antes. Cerca de la medianoche, el servidor y el navegador no coinciden en el día, y React descarta el HTML del servidor.
  • Fechas obsoletas. Una pestaña que se deja abierta toda la noche sigue mostrando ayer como hoy hasta que algo más la vuelve a renderizar.

useToday devuelve undefined en el servidor y durante la hidratación, y después la fecha local. También se vuelve a renderizar a medianoche y cuando la pestaña vuelve a ser visible, porque los temporizadores en pestañas en segundo plano pueden pausarse y perderse la medianoche.

Ejemplos

Límites de fecha

Deshabilita los días pasados y todo lo que esté a más de 30 días. Hasta que se conozca hoy, no se deshabilita nada, para que el HTML del servidor coincida con el primer renderizado del cliente.

"use client"

import { addDays } from "date-fns"

import { Calendar } from "@/components/ui/calendar"
import { useToday } from "@/hooks/use-today"

export function UseTodayBounds() {
  const today = useToday()

  return (
    <Calendar
      mode="single"
      disabled={today ? [{ before: today }, { after: addDays(today, 30) }] : []}
    />
  )
}

Claves de fecha

import {
  fromDateKey,
  getTodayKey,
  subscribeToday,
  toDateKey,
} from "@/hooks/use-today"

toDateKey(new Date(2026, 9, 5))
fromDateKey("2026-10-05")

const unsubscribe = subscribeToday(() => refreshAgenda())

El archivo también exporta las piezas con las que está construido el hook. Las claves de fecha son cadenas locales YYYY-MM-DD. Se comparan por día, se ordenan correctamente y se pueden usar con seguridad como keys de React o claves de caché. subscribeToday te llama de vuelta a medianoche y al volver a la pestaña, fuera de React.

Conviene saber

  • El Date devuelto es la medianoche en hora local, así que compararlo con < o > compara días, no horas.
  • Se devuelve el mismo objeto Date hasta que cambia el día, así que es seguro usarlo en dependencias de efectos.
  • Planifica el renderizado con undefined. Sirven tanto un skeleton como renderizar sin límites basados en la fecha.

Referencia de la API

useToday()

DevuelveDescripción
Date | undefinedLa medianoche local de hoy. undefined en el servidor y durante la hidratación.

Utilidades

ExportaciónDescripción
toDateKey(date)Un Date como cadena local YYYY-MM-DD.
fromDateKey(key)Una cadena YYYY-MM-DD como Date en la medianoche local.
getTodayKey()La clave de fecha de hoy.
subscribeToday(callback)Llama de vuelta a medianoche y cuando la pestaña se hace visible. Devuelve una función para cancelar la suscripción.

Usado por

Calendar, y Date picker a través de él.

Relacionado