React Hydration Mismatch Playground

Test hydration behavior across React versions and build modes

Configuration

React version:

Build mode:

Mount Target

This container shows the live DOM state during hydration

Test Results

Run a test to see the results here

Test Runner

error reconnecting different element types

different-element-types

Server JSX

// server
<div />

Client JSX

// client
<span />

error reconnecting fewer root children

fewer-root-children

Server JSX

// server
<> <span key="a" /> </>

Client JSX

// client
<> <span key="a" /> <span key="b" /> </>

error reconnecting missing attributes

missing-attributes

Server JSX

// server
<div id="foo" />

Client JSX

// client
<div />

error reconnecting added attributes

added-attributes

Server JSX

// server
<div />

Client JSX

// client
<div id="foo" />

error reconnecting different attribute values

different-attribute-values

Server JSX

// server
<div id="foo" />

Client JSX

// client
<div id="bar" />

can not deeply ignore errors reconnecting different attribute values

cannot-deeply-ignore-attr-values

Server JSX

// server
<div><div id="foo" /></div>

Client JSX

// client
<div suppressHydrationWarning><div id="bar" /></div>

error reconnecting missing style attribute

missing-style

Server JSX

// server
<div style={{width: '1px'}} />

Client JSX

// client
<div />

error reconnecting added style attribute

added-style

Server JSX

// server
<div />

Client JSX

// client
<div style={{width: '1px'}} />

error reconnecting empty style attribute

empty-style

Server JSX

// server
<div style={{width: '1px'}} />

Client JSX

// client
<div style={{}} />

error reconnecting added style values

added-style-values

Server JSX

// server
<div style={{}} />

Client JSX

// client
<div style={{width: '1px'}} />

error reconnecting different style values

different-style-values

Server JSX

// server
<div style={{width: '1px'}} />

Client JSX

// client
<div style={{width: '2px'}} />

error reconnecting reordered style values

reordered-style-values

Server JSX

// server
<div style={{width: '1px', fontSize: '2px'}} />

Client JSX

// client
<div style={{fontSize: '2px', width: '1px'}} />

error reconnecting different text

different-text

Server JSX

// server
<div>Text</div>

Client JSX

// client
<div>Other Text</div>

error reconnecting different numbers

different-numbers

Server JSX

// server
<div>{2}</div>

Client JSX

// client
<div>{3}</div>

error reconnecting different number from text

number-vs-text

Server JSX

// server
<div>{2}</div>

Client JSX

// client
<div>3</div>

error reconnecting different text in two code blocks

different-text-two-blocks

Server JSX

// server
<div>{'Text1'}{'Text2'}</div>

Client JSX

// client
<div>{'Text1'}{'Text3'}</div>

error reconnecting missing children

missing-children

Server JSX

// server
<div><div /></div>

Client JSX

// client
<div />

error reconnecting added children

added-children

Server JSX

// server
<div />

Client JSX

// client
<div><div /></div>

error reconnecting more children

more-children

Server JSX

// server
<div><div /></div>

Client JSX

// client
<div><div /><div /></div>

error reconnecting fewer children

fewer-children

Server JSX

// server
<div><div /><div /></div>

Client JSX

// client
<div><div /></div>

error reconnecting reordered children

reordered-children

Server JSX

// server
<div><div /><span /></div>

Client JSX

// client
<div><span /><div /></div>

error reconnecting children separated by whitespace on the client

client-whitespace-separated-children

Server JSX

// server
<div id="parent"><div id="child1" /><div id="child2" /></div>

Client JSX

// client
<div id="parent"><div id="child1" />      <div id="child2" /></div>

error reconnecting children separated by different whitespace on the server

server-whitespace-separated-children

Server JSX

// server
<div id="parent"><div id="child1" />      <div id="child2" /></div>

Client JSX

// client
<div id="parent"><div id="child1" /><div id="child2" /></div>

error reconnecting children separated by different whitespace

different-whitespace

Server JSX

// server
<div id="parent"><div id="child1" /> <div id="child2" /></div>

Client JSX

// client
<div id="parent"><div id="child1" />      <div id="child2" /></div>

distinguish an empty component from a DOM node

empty-component-vs-dom

Server JSX

// server
<div><span /></div>

Client JSX

// client
<div><EmptyComponent /></div>

can not deeply ignore reconnecting reordered children

cannot-deeply-ignore-reordered-children

Server JSX

// server
<div suppressHydrationWarning><div><div /><span /></div></div>

Client JSX

// client
<div suppressHydrationWarning><div><span /><div /></div></div>

error reconnecting different dangerouslySetInnerHTML element

different-dang-html-element

Server JSX

// server
<div dangerouslySetInnerHTML={{__html: "<span id='child1'/>"}} />

Client JSX

// client
<div dangerouslySetInnerHTML={{__html: "<span id='child2'/>"}} />

error reconnecting different text dangerouslySetInnerHTML

different-dang-html-text

Server JSX

// server
<div dangerouslySetInnerHTML={{__html: 'foo'}} />

Client JSX

// client
<div dangerouslySetInnerHTML={{__html: 'bar'}} />

error reconnecting different number dangerouslySetInnerHTML

different-dang-html-number

Server JSX

// server
<div dangerouslySetInnerHTML={{__html: 10}} />

Client JSX

// client
<div dangerouslySetInnerHTML={{__html: 20}} />

error reconnecting different object dangerouslySetInnerHTML

different-dang-html-object

Server JSX

// server
<div dangerouslySetInnerHTML={{__html: {toString(){return 'hi'}}}} />

Client JSX

// client
<div dangerouslySetInnerHTML={{__html: {toString(){return 'bye'}}}} />