This component is server-rendered and then hydrated. React… (Internationalization interview question)

"use client";
export function LastSeen({ at }) {
  return <p>Last seen {new Date(at).toLocaleString()}</p>;
}

The server formats with its own default locale and time zone, and the browser formats with the user's, so the strings differ

With no arguments, toLocaleString() uses the runtime's default locale and time zone. A server often runs in en-US and UTC. A user in Cairo has another time zone and maybe another locale. So the server HTML and the first client render produce different text, and hydration fails.

"toLocaleString doesn't exist on the server" is the tempting wrong answer. Node.js has it, with full locale data. Fixes:
• Pass an explicit locale and timeZone that both sides know, for example from the user's settings.
• Or render the formatted time only after mount, in an effect.
• Or, for a timestamp only, add suppressHydrationWarning to that element.

Handling different client and server content (react.dev) (https://react.dev/reference/react-dom/client/hydrateRoot#handling-different-client-and-server-content)react.dev
Date.prototype.toLocaleString (MDN) (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString)developer.mozilla.org