posts/2022/10/react-hydration-error-425-text-content-does-not-match-server-rendered-html/

[utterances-bot]

Paul Scanlon | React hydration error 425 "Text content does not match server-rendered HTML"

If you're upgrading to React 18 and have run into the following error, this post should help explain what causes the error, and a couple of…

https://paulie.dev/posts/2022/10/react-hydration-error-425-text-content-does-not-match-server-rendered-html/

[dstroot]

This was a lifesaver! I've been racking my brain to fix this error and had it narrowed down to a single component but I could NOT figure out why. The component had date processing - boom! that was it. Made a quick component to abstract this out:

import { Suspense } from 'react'
import { format, parseISO } from 'date-fns'

export const DateFormatter = ({ dateString }: { dateString: string }) => {
  return (
    <time dateTime={dateString}>
      <Suspense fallback={null}>
        {format(parseISO(dateString), 'LLLL d, yyyy')}
      </Suspense>
    </time>
  )
}

Cheers! You rock for writing this up!