Skip to content

Hydration errors - Text content does not match server-rendered HTML. #38263

Answered by icyJoseph
karelfh asked this question in Help
Discussion options

You must be logged in to vote

Hi,

Yeah so this two errors are combined.

Because the client, on the first frame, needs to see the same HTML as the server sent over, in order to place event listeners and place siblings and children correctly, if there's an error while this is being done, React logs an error. This has happened all the way back to React 17 AFAIK.

Problem number 2 kicks in with the new rendering root, which sees this as a rendering error, which is unfriendly to concurrent features, so hydration fails and it throws the entire thing out the window.

At least that's how I interpret the second error. Lots of people just ignored error number 1, during the entire 2 years React 17 was out, not saying you did, but …

Replies: 6 suggested answers 14 replies

Comment options

You must be logged in to vote
7 replies
@icyJoseph
Comment options

@bennettdams
Comment options

@icyJoseph
Comment options

@vivekraj-kr
Comment options

@mikezamora
Comment options

Answer selected by karelfh
Comment options

You must be logged in to vote
0 replies
Comment options

You must be logged in to vote
4 replies
@traviswimer
Comment options

@hansenconnor
Comment options

@traviswimer
Comment options

@hansenconnor
Comment options

Comment options

You must be logged in to vote
3 replies
@yangcheng
Comment options

@Winter
Comment options

@olivier-thatch
Comment options

Comment options

You must be logged in to vote
0 replies
Comment options

You must be logged in to vote
0 replies
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Category
Help
Labels
None yet