<p dir="auto">Components wrapped in React.memo don't have a display name in the "components" tab of React DevTools.</p>
<p dir="auto">React version: 16.13</p>
<h2 dir="auto">Steps To Reproduce</h2>
<ol dir="auto">
<li>create a component that uses React.memo</li>
<li>name the component using "displayName"</li>
<li>open DevTools</li>
<li>the component will not use the name from step 2</li>
</ol>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const Test = React.memo(({ message }) =&gt; {
    return &lt;h1&gt;{message}&lt;/h1&gt;;
});
Test.displayName = &quot;Foo&quot;; // Will be displayed as &quot;Anonymous&quot;

function App() {
    return (
        &lt;Test message=&quot;Hi&quot; /&gt;
    );
}"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-v">Test</span> <span class="pl-c1">=</span> <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-en">memo</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">{</span> message <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">return</span> <span class="pl-c1">&lt;</span><span class="pl-ent">h1</span><span class="pl-c1">&gt;</span><span class="pl-kos">{</span><span class="pl-s1">message</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-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-v">Test</span><span class="pl-kos">.</span><span class="pl-c1">displayName</span> <span class="pl-c1">=</span> <span class="pl-s">"Foo"</span><span class="pl-kos">;</span> <span class="pl-c">// Will be displayed as "Anonymous"</span>

<span class="pl-k">function</span> <span class="pl-v">App</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-kos">(</span>
        <span class="pl-c1">&lt;</span><span class="pl-v">Test</span> <span class="pl-c1">message</span><span class="pl-c1">=</span><span class="pl-s">"Hi"</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-kos">}</span></pre></div>
<h2 dir="auto">The current behavior</h2>
<p dir="auto">Memos ignore "displayName" in React DevTools</p>
<h2 dir="auto">The expected behavior</h2>
<p dir="auto">Memos show "displayName" in React DevTools</p>
<p dir="auto">If you create a component via <code class="notranslate">React.memo</code> and then explicitly provide it with a <code class="notranslate">displayName</code>, DevTools ignore this display name.</p>
<p dir="auto">React version: 16.12.0<br>
DevTools version: 4.4.0</p>
<h2 dir="auto">Steps To Reproduce</h2>
<ol dir="auto">
<li>Create a component like:</li>
</ol>
<div class="highlight highlight-source-tsx notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const FancyMemoComponent = React.memo(() =&gt; 'Check my name in DevTools')"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-smi">FancyMemoComponent</span> <span class="pl-c1">=</span> <span class="pl-smi">React</span><span class="pl-kos">.</span><span class="pl-en">memo</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-s">'Check my name in DevTools'</span><span class="pl-kos">)</span></pre></div>
<ol start="2" dir="auto">
<li>Provide it with a <code class="notranslate">displayName</code></li>
</ol>
<div class="highlight highlight-source-tsx notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="FancyMemoComponent.displayName = 'FancyMemoComponent'"><pre class="notranslate"><span class="pl-smi">FancyMemoComponent</span><span class="pl-kos">.</span><span class="pl-c1">displayName</span> <span class="pl-c1">=</span> <span class="pl-s">'FancyMemoComponent'</span></pre></div>
<ol start="3" dir="auto">
<li>Check its name in DevTools.</li>
</ol>

<p dir="auto">Link to code example: <a href="https://codesandbox.io/s/react-memo-display-name-vk7gv" rel="nofollow">https://codesandbox.io/s/react-memo-display-name-vk7gv</a></p>

<h2 dir="auto">The current behavior</h2>
<p dir="auto">DevTools do not display the given <code class="notranslate">displayName</code>.</p>
<h2 dir="auto">The expected behavior</h2>
<p dir="auto">DevTools should display the given <code class="notranslate">displayName</code>.</p>
<h2 dir="auto">Comments</h2>
<p dir="auto">I am aware that the name can be picked from the function inside <code class="notranslate">React.memo</code>, but I prefer using anonymous functions.</p>
<p dir="auto">I am using this workaround:</p>
<div class="highlight highlight-source-tsx notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="FancyMemoComponent.type.displayName = 'FancyMemoComponent'"><pre class="notranslate"><span class="pl-smi">FancyMemoComponent</span><span class="pl-kos">.</span><span class="pl-c1">type</span><span class="pl-kos">.</span><span class="pl-c1">displayName</span> <span class="pl-c1">=</span> <span class="pl-s">'FancyMemoComponent'</span></pre></div>