Next.js Discord

Discord Forum

How to handle hydration error on dates?

Unanswered
Spectacled Caiman posted this in #help-forum
Open in Discord
Spectacled CaimanOP
{new Date(transaction.createdAt).toLocaleString()}


I've this kind of thing in my nextjs code and I get hydration error every time

Warning: Text content did not match. Server: "3/22/2024, 10:44:54 PM" Client: "22/03/2024, 22:44:55"


how should I fix that?

1 Reply

@Spectacled Caiman ts {new Date(transaction.createdAt).toLocaleString()} I've this kind of thing in my nextjs code and I get hydration error every time Warning: Text content did not match. Server: "3/22/2024, 10:44:54 PM" Client: "22/03/2024, 22:44:55" how should I fix that?
Try either of these:

* Add suppressHydrationWarning prop to the html element rendering the date string

* Do not display anything or display only a loading stage at first, then in a useEffect change it to the date string you need