React Hydration Mismatch Playground

Test hydration behavior across React versions and build modes

Configuration

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'}}}} />