<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong><br>
bug</p>
<p dir="auto"><strong>What is the current behavior?</strong></p>
<ul dir="auto">
<li>Go to <a href="https://codepen.io/anon/pen/qjpBzw" rel="nofollow">https://codepen.io/anon/pen/qjpBzw</a> (this is a modified version of the 'Controlled Components' docmentation page to put the chars in upper case)</li>
<li>Type 'a' into the input, you get 'A'</li>
<li>Then type 'b', you get 'AAB'</li>
</ul>
<p dir="auto"><strong>What is the expected behavior?</strong><br>
We should have 'AB'</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><br>
The CodePen uses React@15.6.1, and the bug only occurs with Firefox <em>mobile</em> (not with the desktop version). I tested with FF53 and 54</p>
<p dir="auto">The bug only occurs because i change the case.</p>
<p dir="auto">With server-side rendering (SSR), after page reload, <code class="notranslate">input</code> element preserves its content but <code class="notranslate">useState</code> clears its state.<br>
The value of input element (in DOM, visible to user) and internal state are different in this situation.<br>
In the view of user, application looks inconsistent.</p>
<p dir="auto">I searched Internet for the issue but couldn't find someone who mentioned this. Sorry if duplicated.</p>

<p dir="auto">React version: 17.0.2</p>
<h2 dir="auto">Steps To Reproduce</h2>
<p dir="auto">Basically this code reproduces, but a server for SSR is necessary.<br>
This application provides an input box and a button.<br>
When the button is clicked, it opens a dialog to show the current value of the input box.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const React = require(&quot;react&quot;)
const ReactDOM = require(&quot;react-dom&quot;)

const App = () =&gt; {
  const [value, setValue] = React.useState(&quot;&quot;)
  return (
    &lt;form&gt;
      &lt;input type=&quot;text&quot; value={value} onChange={ev =&gt; setValue(ev.target.value)} /&gt;
      &lt;button type=&quot;button&quot; onClick={() =&gt; window.alert(value)}&gt;Show value&lt;/button&gt;
      &lt;button type=&quot;button&quot; onClick={() =&gt; document.location.reload()}&gt;Reload&lt;/button&gt;
    &lt;/form&gt;
  )
}

ReactDOM.hydrate((&lt;App /&gt;), document.getElementById(&quot;container&quot;))"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-v">React</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">"react"</span><span class="pl-kos">)</span>
<span class="pl-k">const</span> <span class="pl-v">ReactDOM</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">"react-dom"</span><span class="pl-kos">)</span>

<span class="pl-k">const</span> <span class="pl-v">App</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-kos">{</span>
  <span class="pl-k">const</span> <span class="pl-kos">[</span><span class="pl-s1">value</span><span class="pl-kos">,</span> <span class="pl-s1">setValue</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-en">useState</span><span class="pl-kos">(</span><span class="pl-s">""</span><span class="pl-kos">)</span>
  <span class="pl-k">return</span> <span class="pl-kos">(</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">form</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">input</span> <span class="pl-c1">type</span><span class="pl-c1">=</span><span class="pl-s">"text"</span> <span class="pl-c1">value</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">value</span><span class="pl-kos">}</span> <span class="pl-c1">onChange</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">ev</span> <span class="pl-c1">=&gt;</span> <span class="pl-s1">setValue</span><span class="pl-kos">(</span><span class="pl-s1">ev</span><span class="pl-kos">.</span><span class="pl-c1">target</span><span class="pl-kos">.</span><span class="pl-c1">value</span><span class="pl-kos">)</span><span class="pl-kos">}</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">button</span> <span class="pl-c1">type</span><span class="pl-c1">=</span><span class="pl-s">"button"</span> <span class="pl-c1">onClick</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-smi">window</span><span class="pl-kos">.</span><span class="pl-en">alert</span><span class="pl-kos">(</span><span class="pl-s1">value</span><span class="pl-kos">)</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>Show value<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">button</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">button</span> <span class="pl-c1">type</span><span class="pl-c1">=</span><span class="pl-s">"button"</span> <span class="pl-c1">onClick</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-c1">location</span><span class="pl-kos">.</span><span class="pl-en">reload</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>Reload<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">button</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">form</span><span class="pl-c1">&gt;</span>
  <span class="pl-kos">)</span>
<span class="pl-kos">}</span>

<span class="pl-v">ReactDOM</span><span class="pl-kos">.</span><span class="pl-en">hydrate</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-c1">&lt;</span><span class="pl-v">App</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span><span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">getElementById</span><span class="pl-kos">(</span><span class="pl-s">"container"</span><span class="pl-kos">)</span><span class="pl-kos">)</span></pre></div>
<p dir="auto">Full project: <a href="https://github.com/facebook/react/files/6441549/react-repro.zip">react-repro.zip</a></p>
<p dir="auto"><strong>How to reproduce</strong></p>
<p dir="auto">Download and unzip it somewhere. Start a server like this:</p>
<div class="highlight highlight-source-shell notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="npm ci
npm run build &amp;&amp; npm run start # listening to localhost:8080"><pre class="notranslate">npm ci
npm run build <span class="pl-k">&amp;&amp;</span> npm run start <span class="pl-c"><span class="pl-c">#</span> listening to localhost:8080</span></pre></div>
<p dir="auto">And then visit <a href="http://localhost:8080" rel="nofollow">http://localhost:8080</a> on browser:</p>
<ol dir="auto">
<li>Put some text in the input box</li>
<li>Click "Reload" button. (Page will be reloaded but the input preserves its value.)</li>
<li>Click "Show value". A dialog opens with no content (empty string), which indicates a mismatch between <code class="notranslate">value</code> from <code class="notranslate">useState</code> and DOM state.</li>
</ol>

<p dir="auto">Link to code example:</p>

<p dir="auto">(Sorry, I tried but couldn't make a reproduction. Reloading refreshes the input content in code example environment.)</p>
<h2 dir="auto">The current behavior</h2>
<ul dir="auto">
<li>"Show value" button can show incorrect value.</li>
</ul>
<h2 dir="auto">The expected behavior</h2>
<ul dir="auto">
<li>"Show value" button should show the same value as the input shows. (For example, make sure that input value is cleared after reload.)</li>
</ul>