<p dir="auto">Hello, discovered little annoying bug<br>
When you invoke replaceState() with an empty object textarea innerHTML does not update, however the value do</p>
<p dir="auto">Please see example here<br>
<a href="http://jsfiddle.net/kb3gN/7887/" rel="nofollow">http://jsfiddle.net/kb3gN/7887/</a></p>
<p dir="auto">React version: 17.0.0</p>
<h2 dir="auto">Steps To Reproduce</h2>
<ol dir="auto">
<li>Write the following code below:
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import React from &quot;react&quot;;
import ReactDOM from &quot;react-dom&quot;;

let i = 0;

const origLog = console.log.bind(console);

const App = () =&gt; {
    const [a, setA] = React.useState(0);
    origLog(i); 
    console.log(i + ': hijacked log');
    origLog(&quot;test&quot;);
    i++;
    return (
        &lt;button
            onClick={() =&gt; {
                setA(a + 1);
            }}
        &gt;
            click me
        &lt;/button&gt;
    );
};

const rootElement = document.getElementById(&quot;root&quot;);
ReactDOM.render(
    &lt;React.StrictMode&gt;
        &lt;App /&gt;
    &lt;/React.StrictMode&gt;,
    rootElement
);"><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-v">ReactDOM</span> <span class="pl-k">from</span> <span class="pl-s">"react-dom"</span><span class="pl-kos">;</span>

<span class="pl-k">let</span> <span class="pl-s1">i</span> <span class="pl-c1">=</span> <span class="pl-c1">0</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-s1">origLog</span> <span class="pl-c1">=</span> <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-c1">log</span><span class="pl-kos">.</span><span class="pl-en">bind</span><span class="pl-kos">(</span><span class="pl-smi">console</span><span class="pl-kos">)</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">a</span><span class="pl-kos">,</span> <span class="pl-s1">setA</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-c1">0</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-s1">origLog</span><span class="pl-kos">(</span><span class="pl-s1">i</span><span class="pl-kos">)</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-s1">i</span> <span class="pl-c1">+</span> <span class="pl-s">': hijacked log'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-s1">origLog</span><span class="pl-kos">(</span><span class="pl-s">"test"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-s1">i</span><span class="pl-c1">++</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">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-kos">{</span>
                <span class="pl-s1">setA</span><span class="pl-kos">(</span><span class="pl-s1">a</span> <span class="pl-c1">+</span> <span class="pl-c1">1</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
            <span class="pl-kos">}</span><span class="pl-kos">}</span>
        <span class="pl-c1">&gt;</span>
            click me
        <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-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-s1">rootElement</span> <span class="pl-c1">=</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">"root"</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">render</span><span class="pl-kos">(</span>
    <span class="pl-c1">&lt;</span><span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-v">StrictMode</span><span class="pl-c1">&gt;</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-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-v">StrictMode</span><span class="pl-c1">&gt;</span><span class="pl-kos">,</span>
    <span class="pl-s1">rootElement</span>
<span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
</li>
<li>While the <code class="notranslate">origLog()</code> function is called in every call to <code class="notranslate">App()</code>, the “hijacked” calls to <code class="notranslate">console.log()</code> would only call the original method every other time, and therefore only even numbers are logged by this function.</li>
</ol>

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

<p dir="auto"><a href="https://codesandbox.io/s/jolly-bush-4ql7z?file=/src/index.js" rel="nofollow">https://codesandbox.io/s/jolly-bush-4ql7z?file=/src/index.js</a></p>
<h2 dir="auto">The current behavior</h2>
<p dir="auto">React automatically “hijacks” the console’s methods to prevent duplicated logs, which might cause unpredictable behaviors.</p>
<h2 dir="auto">The expected behavior</h2>
<p dir="auto">The original console methods are called by default even if in the component code.</p>