Skip to content

Daily Challenge date causes hydration mismatch across time zones #17

Description

@cwklurks

Reproduction

On the production site at https://www.codesprint.ca/, open a fresh Playwright Chromium context with timezoneId: "America/Los_Angeles" while UTC and Los Angeles are on different calendar dates. Navigate to / and collect pageerror events.

At 2026-09-05 01:10 UTC:

  • UTC browser: no page errors.
  • Los Angeles browser, local date September 4: React hydration error #418, text mismatch.

Cause

hooks/useDaily.ts calculates today with useMemo(() => getLocalDateString(), []) during render. The statically rendered page therefore contains the build server's date-dependent Daily Challenge number, while hydration renders the browser's local date-dependent number in components/daily/DailyChallengeCard.tsx.

Neither file changed in performance PR #16; the same code exists at its baseline commit 839edb9. The new release's production deployment is successful. This is a pre-existing date-dependent hydration defect, not a failed deployment.

Expected fix and regression coverage

Render a date-independent daily placeholder during SSR and initial hydration, then resolve the local date on the client. Avoid using suppressHydrationWarning to hide the mismatch.

Add production-browser coverage with browser and build dates on different days, including a cached build from the previous day. Consider updating today's challenge when a tab stays open across local midnight, since today is currently memoized for the lifetime of the hook.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions