Rendering hours from datetime breaks styled components

What version of Remix are you using?

1.6.3

Steps to Reproduce

• Install styled components
• Build something highly visible in styled components just so it’s easier to see it break
• Render hours, eg:

  const now = new Date();
  const hr = now.getHours();
  ...
  return (<p>{hr}</p>)
  

• Deploy to something like Vercel or set local dev environment to UTC time before starting up your Remix app

Expected Behavior

Styled components doesn’t break.

Actual Behavior

Styled components breaks with error: “Remix Hydration failed: UI on server and client do not match”.

@noahstegmaier and I suspect that styled components breaks because hours is rendered in UTC time on the server but locale time on the client.

To be honest, we’re not sure if this is a bug or if we’re supposed to handle this ourselves. So, also not sure if this should be asked on Remix or Styled components GitHub issues.

[alexalexyang]

After enough headspace and hindsight, I believe this issue is not a bug and should be handled ourselves.

One way is as @machour describes it (thanks!). Another way, which fits my use case, is to render the date after everything has mounted.

[kiliman]

Since the server won’t render anything, it may cause shift depending on what’s around it… but you won’t see text change. If you need to, you can always set a fallback that reserves some space.