<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong></p>
<p dir="auto">Bug.</p>
<p dir="auto"><strong>What is the current behavior?</strong></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="function Foo() {
  return 'foo';
}

function Test() {
  return &lt;span&gt;&lt;Foo /&gt;bar&lt;/span&gt;;
}"><pre class="notranslate"><span class="pl-k">function</span> <span class="pl-v">Foo</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">return</span> <span class="pl-s">'foo'</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>

<span class="pl-k">function</span> <span class="pl-v">Test</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">return</span> <span class="pl-c1">&lt;</span><span class="pl-ent">span</span><span class="pl-c1">&gt;</span><span class="pl-c1">&lt;</span><span class="pl-ent">Foo</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>bar<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">span</span><span class="pl-c1">&gt;</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">Hydration of <code class="notranslate">&lt;Test /&gt;</code> to serverside rendered <code class="notranslate">&lt;Test /&gt;</code> produces following warning:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Warning: Text content did not match. Server: &quot;foobar&quot; Client: &quot;foo&quot;"><pre class="notranslate"><code class="notranslate">Warning: Text content did not match. Server: "foobar" Client: "foo"
</code></pre></div>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">No warning.</p>
<p dir="auto"><strong>Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?</strong></p>
<ul dir="auto">
<li>react@16.0.0</li>
<li>react-dom@16.0.0</li>
</ul>
<p dir="auto">Observed this on react@16.0.0-beta.5</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import React from 'react';
import { renderToString } from 'react-dom/server';

const B = () =&gt; 'b';

console.log(renderToString(&lt;div&gt;{'a'}&lt;B /&gt;{'c'}&lt;/div&gt;));"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-v">React</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">renderToString</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'react-dom/server'</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-v">B</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-s">'b'</span><span class="pl-kos">;</span>

<span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-en">renderToString</span><span class="pl-kos">(</span><span class="pl-c1">&lt;</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span><span class="pl-kos">{</span><span class="pl-s">'a'</span><span class="pl-kos">}</span><span class="pl-c1">&lt;</span><span class="pl-v">B</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span><span class="pl-kos">{</span><span class="pl-s">'c'</span><span class="pl-kos">}</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">This renders as <code class="notranslate">&lt;div data-reactroot=""&gt;a&lt;!-- --&gt;bc&lt;/div&gt;</code>. If you try to hydrate this you'll get the error: Text content did not match. Server: "bc" Client: "b".</p>