Fix 'Text content does not match server-rendered HTML' Warning

This is the gentler sibling of the full hydration crash: a single text node rendered differently on the server and client. It almost always comes down to formatting that depends on time or locale.

Cause: Locale or Time-Dependent Formatting

The server formats a date using its locale/timezone; the browser uses the visitor's. toLocaleDateString() with no arguments is the usual offender because it silently picks up the environment locale.

Fix 1: Pin the Locale and Timezone

new Intl.DateTimeFormat("en-GB", {
  dateStyle: "medium",
  timeZone: "UTC",
}).format(new Date(order.createdAt));

Fix 2: Format After Hydration

If the value must reflect the visitor's locale, render a neutral placeholder on the server and localize in useEffect:

const [label, setLabel] = useState(iso); // stable on server
useEffect(() => {
  setLabel(new Date(iso).toLocaleDateString());
}, [iso]);