<p dir="auto">Hello everyone,</p>
<p dir="auto">I have a problem with Chrome extension -  React Developer Tools, if I change component's state it's not changing in the dev tools window (as in the screenshot below) I am only able to see arrows with title "Reset value".<br>
Does somebody know how it could be fixed?</p>
<p dir="auto">Thanks a lot for help!</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/40744326/65599624-8e7e9d00-df9e-11e9-9f5e-4be249278c6d.png"><img src="https://user-images.githubusercontent.com/40744326/65599624-8e7e9d00-df9e-11e9-9f5e-4be249278c6d.png" alt="Zrzut ekranu z 2019-09-25 14-06-22" style="max-width: 100%;"></a></p>
<p dir="auto">Followup from <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="248067090" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/10385" data-hovercard-type="pull_request" data-hovercard-url="/facebook/react/pull/10385/hovercard" href="https://github.com/facebook/react/pull/10385">#10385</a>, it looks like the CommonJS build is saving short variable name references to long property names, however it does this in a bunch of places. The net output is a larger build because the referenced names (like <code class="notranslate">IndeterminateComponent</code>) are duplicated quite a bit:</p>
<p dir="auto">For example:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content=" D = {
        IndeterminateComponent: 0,
        FunctionalComponent: 1,
        ClassComponent: 2,
        HostRoot: 3,
        HostPortal: 4,
        HostComponent: 5,
        HostText: 6,
        CoroutineComponent: 7,
        CoroutineHandlerPhase: 8,
        YieldComponent: 9,
        Fragment: 10
    },
    F = {
        ELEMENT_NODE: 1,
        TEXT_NODE: 3,
        COMMENT_NODE: 8,
        DOCUMENT_NODE: 9,
        DOCUMENT_FRAGMENT_NODE: 11
    },
    xa = D.HostComponent,
    ya = D.HostText,
    za = F.ELEMENT_NODE,
    Aa = F.COMMENT_NODE,
    Ba = z.ID_ATTRIBUTE_NAME,"><pre class="notranslate"> <span class="pl-v">D</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
        <span class="pl-c1">IndeterminateComponent</span>: <span class="pl-c1">0</span><span class="pl-kos">,</span>
        <span class="pl-c1">FunctionalComponent</span>: <span class="pl-c1">1</span><span class="pl-kos">,</span>
        <span class="pl-c1">ClassComponent</span>: <span class="pl-c1">2</span><span class="pl-kos">,</span>
        <span class="pl-c1">HostRoot</span>: <span class="pl-c1">3</span><span class="pl-kos">,</span>
        <span class="pl-c1">HostPortal</span>: <span class="pl-c1">4</span><span class="pl-kos">,</span>
        <span class="pl-c1">HostComponent</span>: <span class="pl-c1">5</span><span class="pl-kos">,</span>
        <span class="pl-c1">HostText</span>: <span class="pl-c1">6</span><span class="pl-kos">,</span>
        <span class="pl-c1">CoroutineComponent</span>: <span class="pl-c1">7</span><span class="pl-kos">,</span>
        <span class="pl-c1">CoroutineHandlerPhase</span>: <span class="pl-c1">8</span><span class="pl-kos">,</span>
        <span class="pl-c1">YieldComponent</span>: <span class="pl-c1">9</span><span class="pl-kos">,</span>
        <span class="pl-c1">Fragment</span>: <span class="pl-c1">10</span>
    <span class="pl-kos">}</span><span class="pl-kos">,</span>
    <span class="pl-v">F</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
        <span class="pl-c1">ELEMENT_NODE</span>: <span class="pl-c1">1</span><span class="pl-kos">,</span>
        <span class="pl-c1">TEXT_NODE</span>: <span class="pl-c1">3</span><span class="pl-kos">,</span>
        <span class="pl-c1">COMMENT_NODE</span>: <span class="pl-c1">8</span><span class="pl-kos">,</span>
        <span class="pl-c1">DOCUMENT_NODE</span>: <span class="pl-c1">9</span><span class="pl-kos">,</span>
        <span class="pl-c1">DOCUMENT_FRAGMENT_NODE</span>: <span class="pl-c1">11</span>
    <span class="pl-kos">}</span><span class="pl-kos">,</span>
    <span class="pl-s1">xa</span> <span class="pl-c1">=</span> <span class="pl-v">D</span><span class="pl-kos">.</span><span class="pl-c1">HostComponent</span><span class="pl-kos">,</span>
    <span class="pl-s1">ya</span> <span class="pl-c1">=</span> <span class="pl-v">D</span><span class="pl-kos">.</span><span class="pl-c1">HostText</span><span class="pl-kos">,</span>
    <span class="pl-s1">za</span> <span class="pl-c1">=</span> <span class="pl-v">F</span><span class="pl-kos">.</span><span class="pl-c1">ELEMENT_NODE</span><span class="pl-kos">,</span>
    <span class="pl-v">Aa</span> <span class="pl-c1">=</span> <span class="pl-v">F</span><span class="pl-kos">.</span><span class="pl-c1">COMMENT_NODE</span><span class="pl-kos">,</span>
    <span class="pl-v">Ba</span> <span class="pl-c1">=</span> <span class="pl-s1">z</span><span class="pl-kos">.</span><span class="pl-c1">ID_ATTRIBUTE_NAME</span><span class="pl-kos">,</span></pre></div>
<p dir="auto">The UMD build does not have any of these tokens. The CJS build doesn't crush the names either. Later in the build there are things like this:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var Mf = Qe.reconcileChildFibers,
    Nf = S.popContextProvider,
    Of = D.IndeterminateComponent,
    Pf = D.FunctionalComponent,
    Qf = D.ClassComponent,
    Rf = D.HostRoot,
    Sf = D.HostComponent,
    Tf = D.HostText,
    Uf = D.HostPortal,
    Vf = D.CoroutineComponent,
    Wf = D.CoroutineHandlerPhase,
    Xf = D.YieldComponent,
    Yf = D.Fragment,
    Zf = L.Placement,
    $f = L.Ref,
    ag = L.Update,
    bg = R.OffscreenPriority;"><pre class="notranslate"><span class="pl-k">var</span> <span class="pl-v">Mf</span> <span class="pl-c1">=</span> <span class="pl-v">Qe</span><span class="pl-kos">.</span><span class="pl-c1">reconcileChildFibers</span><span class="pl-kos">,</span>
    <span class="pl-v">Nf</span> <span class="pl-c1">=</span> <span class="pl-v">S</span><span class="pl-kos">.</span><span class="pl-c1">popContextProvider</span><span class="pl-kos">,</span>
    <span class="pl-v">Of</span> <span class="pl-c1">=</span> <span class="pl-v">D</span><span class="pl-kos">.</span><span class="pl-c1">IndeterminateComponent</span><span class="pl-kos">,</span>
    <span class="pl-v">Pf</span> <span class="pl-c1">=</span> <span class="pl-v">D</span><span class="pl-kos">.</span><span class="pl-c1">FunctionalComponent</span><span class="pl-kos">,</span>
    <span class="pl-v">Qf</span> <span class="pl-c1">=</span> <span class="pl-v">D</span><span class="pl-kos">.</span><span class="pl-c1">ClassComponent</span><span class="pl-kos">,</span>
    <span class="pl-v">Rf</span> <span class="pl-c1">=</span> <span class="pl-v">D</span><span class="pl-kos">.</span><span class="pl-c1">HostRoot</span><span class="pl-kos">,</span>
    <span class="pl-v">Sf</span> <span class="pl-c1">=</span> <span class="pl-v">D</span><span class="pl-kos">.</span><span class="pl-c1">HostComponent</span><span class="pl-kos">,</span>
    <span class="pl-v">Tf</span> <span class="pl-c1">=</span> <span class="pl-v">D</span><span class="pl-kos">.</span><span class="pl-c1">HostText</span><span class="pl-kos">,</span>
    <span class="pl-v">Uf</span> <span class="pl-c1">=</span> <span class="pl-v">D</span><span class="pl-kos">.</span><span class="pl-c1">HostPortal</span><span class="pl-kos">,</span>
    <span class="pl-v">Vf</span> <span class="pl-c1">=</span> <span class="pl-v">D</span><span class="pl-kos">.</span><span class="pl-c1">CoroutineComponent</span><span class="pl-kos">,</span>
    <span class="pl-v">Wf</span> <span class="pl-c1">=</span> <span class="pl-v">D</span><span class="pl-kos">.</span><span class="pl-c1">CoroutineHandlerPhase</span><span class="pl-kos">,</span>
    <span class="pl-v">Xf</span> <span class="pl-c1">=</span> <span class="pl-v">D</span><span class="pl-kos">.</span><span class="pl-c1">YieldComponent</span><span class="pl-kos">,</span>
    <span class="pl-v">Yf</span> <span class="pl-c1">=</span> <span class="pl-v">D</span><span class="pl-kos">.</span><span class="pl-c1">Fragment</span><span class="pl-kos">,</span>
    <span class="pl-v">Zf</span> <span class="pl-c1">=</span> <span class="pl-v">L</span><span class="pl-kos">.</span><span class="pl-c1">Placement</span><span class="pl-kos">,</span>
    <span class="pl-s1">$f</span> <span class="pl-c1">=</span> <span class="pl-v">L</span><span class="pl-kos">.</span><span class="pl-c1">Ref</span><span class="pl-kos">,</span>
    <span class="pl-s1">ag</span> <span class="pl-c1">=</span> <span class="pl-v">L</span><span class="pl-kos">.</span><span class="pl-c1">Update</span><span class="pl-kos">,</span>
    <span class="pl-s1">bg</span> <span class="pl-c1">=</span> <span class="pl-v">R</span><span class="pl-kos">.</span><span class="pl-c1">OffscreenPriority</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">This duplicates a lot: If you look in the CJS build, something along the lines of a = d.HostNode shows up in like 10 places. This is true of all of these tokens.</p>
<p dir="auto">Here's a beautified version for reference:<br>
<a href="https://gist.github.com/nhunzaker/69ede0d4014d9c590908398ac6bc6c13">https://gist.github.com/nhunzaker/69ede0d4014d9c590908398ac6bc6c13</a></p>