Fix RelativeTime hydration across time zones - #8330
Conversation
🦋 Changeset detectedLatest commit: 4b40ea0 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
github-actions
Bot
added
the
integration-tests: recommended
|
There was a problem hiding this comment.
Pull request overview
Updates RelativeTime to render its fallback date deterministically during SSR/hydration by formatting the fallback in UTC, preventing hydration mismatches when server and client local time zones differ.
Changes:
- Add
timeZone: 'UTC'to the fallbacktoLocaleDateStringformatting options. - Add a hydration regression test intended to catch mismatches when server/client time zones differ.
- Add a patch changeset for
@primer/react.
Show a summary per file
| File | Description |
|---|---|
| packages/react/src/RelativeTime/RelativeTime.tsx | Forces fallback date formatting to UTC for consistent SSR/client output. |
| packages/react/src/RelativeTime/RelativeTime.test.tsx | Adds a hydration regression test for differing server/client time zones. |
| .changeset/quiet-times-agree.md | Publishes the change as a patch release entry. |
Review details
💡 Add a code-review agent skill for context-aware, tailored reviews. Learn more in the docs.
- Files reviewed: 3/3 changed files
- Comments generated: 2
- Review effort level: Lite
| const localeOptions: Intl.DateTimeFormatOptions = { | ||
| month: 'short', | ||
| day: 'numeric', | ||
| year: 'numeric', | ||
| timeZone: 'UTC', | ||
| } satisfies Intl.DateTimeFormatOptions |
| const toLocaleDateStringSpy = vi.spyOn(Date.prototype, 'toLocaleDateString').mockReturnValue('Mar 7, 2024') | ||
| const container = document.createElement('div') | ||
| container.innerHTML = renderToString(relativeTime) | ||
| document.body.appendChild(container) | ||
|
|
||
| toLocaleDateStringSpy.mockImplementation((_locales, options) => | ||
| options?.timeZone === 'UTC' ? 'Mar 7, 2024' : 'Mar 6, 2024', | ||
| ) |
Closes #
Prevent
RelativeTimefallback text from differing between server and client when they use different local time zones. The fallback now formats dates in UTC, matching deterministically across SSR and hydration.Changelog
New
None.
Changed
RelativeTimeuses UTC when rendering its fallback date.Removed
None.
Rollout strategy
Testing & Reviewing
node node_modules/vitest/vitest.mjs run --root . --project @primer/react packages/react/src/RelativeTime/RelativeTime.test.tsx