Timezone

LaunchFast uses client hints to detect the user's timezone on the server, letting you render dates and times correctly on the first request — no flash of incorrect content or hydration errors.

The problem

The server does not know the user's timezone by default. Common workarounds (rendering in UTC, using the server's timezone, or hydrating client-side) all produce flashes of incorrect content or hydration mismatches. Client hints solve this by communicating the timezone via cookies before the page renders.

Server-side usage

In loaders and server-only code, use getHints(request).timeZone to get the user's timezone:

import { getHints } from '#app/utils/client-hints.tsx'

export async function loader({ request }: LoaderFunctionArgs) {
  const timeZone = getHints(request).timeZone
  // Use timeZone with Intl.DateTimeFormat or your preferred library
}

Client-side usage

In components, use useHints().timeZone:

import { useHints } from '#app/utils/client-hints.tsx'

function MyComponent() {
  const { timeZone } = useHints()
  // Format dates using the user's timezone
}

Date formatting utility

LaunchFast provides a getDateTimeFormat utility that creates an Intl.DateTimeFormat in the user's timezone. It also uses the accept-language header to determine the user's preferred locale for formatting.

Related

• Client hints — how client preferences are communicated to the server