<p dir="auto">Describe what you were doing when the bug occurred:</p>
<ol dir="auto">
<li>Start profile recording</li>
<li>Click once a component (some components will hide)</li>
<li>Stop profile recording</li>
<li>Click "Ranked" tab</li>
</ol>
<hr>
<h2 dir="auto">Please do not remove the text below this line</h2>
<p dir="auto">DevTools version: 4.2.1-3816ae7c3</p>
<p dir="auto">Call stack: at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:157108<br>
at Map.forEach ()<br>
at commitIndex (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:157054)<br>
at e.getRankedChartData (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:157577)<br>
at vl (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:314907)<br>
at gi (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:59907)<br>
at jl (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:107381)<br>
at Lc (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:92715)<br>
at Pc (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:92640)<br>
at wc (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:89544)</p>
<p dir="auto">Component stack: in vl<br>
in div<br>
in div<br>
in div<br>
in wo<br>
in Unknown<br>
in n<br>
in Unknown<br>
in div<br>
in div<br>
in Li<br>
in $e<br>
in dn<br>
in Ca<br>
in Pc</p>
<p dir="auto">Why is the value of the <code class="notranslate">key</code>-attribute unavailable in <code class="notranslate">props</code>?</p>
<p dir="auto">I'm experimenting with state management abstractions, and I wanted to make <code class="notranslate">key</code> required and use the value as the key to a state container - something along the lines of this:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;Provider store={store} key=&quot;count&quot;&gt;
    {count =&gt; &lt;h1&gt;Count: {count}&lt;/h1&gt;}
&lt;/Provider&gt;"><pre class="notranslate"><span class="pl-c1">&lt;</span><span class="pl-ent">Provider</span> <span class="pl-c1">store</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">store</span><span class="pl-kos">}</span> <span class="pl-c1">key</span><span class="pl-c1">=</span><span class="pl-s">"count"</span><span class="pl-c1">&gt;</span>
    <span class="pl-kos">{</span><span class="pl-s1">count</span> <span class="pl-c1">=&gt;</span> <span class="pl-c1">&lt;</span><span class="pl-ent">h1</span><span class="pl-c1">&gt;</span>Count: <span class="pl-kos">{</span><span class="pl-s1">count</span><span class="pl-kos">}</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">h1</span><span class="pl-c1">&gt;</span><span class="pl-kos">}</span>
<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Provider</span><span class="pl-c1">&gt;</span></pre></div>
<p dir="auto">This would be meaningful, because the <code class="notranslate">Provider</code> instance can't actually be reused if the key to the store changes, at least not without adding extra complexity.</p>
<p dir="auto">Currently, my only recourse is to duplicate this value with a different name:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;Provider store={store} key=&quot;count&quot; storeKey=&quot;count&quot;&gt;
    {count =&gt; &lt;h1&gt;Count: {count}&lt;/h1&gt;}
&lt;/Provider&gt;"><pre class="notranslate"><span class="pl-c1">&lt;</span><span class="pl-ent">Provider</span> <span class="pl-c1">store</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">store</span><span class="pl-kos">}</span> <span class="pl-c1">key</span><span class="pl-c1">=</span><span class="pl-s">"count"</span> <span class="pl-c1">storeKey</span><span class="pl-c1">=</span><span class="pl-s">"count"</span><span class="pl-c1">&gt;</span>
    <span class="pl-kos">{</span><span class="pl-s1">count</span> <span class="pl-c1">=&gt;</span> <span class="pl-c1">&lt;</span><span class="pl-ent">h1</span><span class="pl-c1">&gt;</span>Count: <span class="pl-kos">{</span><span class="pl-s1">count</span><span class="pl-kos">}</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">h1</span><span class="pl-c1">&gt;</span><span class="pl-kos">}</span>
<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Provider</span><span class="pl-c1">&gt;</span></pre></div>
<p dir="auto">This is rather inelegant and errorprone.</p>
<p dir="auto"><code class="notranslate">key</code> is a prop, so I'd expect it to exist in <code class="notranslate">props</code>.</p>
<p dir="auto">Why this seemingly arbitrary restriction?</p>