<p dir="auto"><strong>Feature</strong></p>
<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">With a UI kit that uses forwardRefs, I get error messages like this:</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/12100/53372321-61ceae00-3907-11e9-9d20-190315cc7f06.png"><img src="https://user-images.githubusercontent.com/12100/53372321-61ceae00-3907-11e9-9d20-190315cc7f06.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">It would look a lot better if forwardRefs were a bit less obtrusive, and if they picked up the functions displayName rather than just the name of the function they wrap.</p>
<p dir="auto">In our UI Kit we have a pattern like:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const View = forwardRef(function UIView(){ return &lt;div /&gt; })
View.displayName = 'SomeDisplayName'"><pre class="notranslate"><code class="notranslate">const View = forwardRef(function UIView(){ return &lt;div /&gt; })
View.displayName = 'SomeDisplayName'
</code></pre></div>
<p dir="auto">For some reason it's not showing that, just showing the inner one. Further the "bigness" of ForwardRef() makes it hard to see visually when scanning. Perhaps something more like this would help:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Warning: Encountered two children with the same key, `confluence`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
    in div (created by ForwardRef(Gloss))
    in Gloss (ForwardRef)
    in Gloss (ForwardRef) (created by OnboardMain)
    in div (created by Gloss (ForwardRef))
    in Gloss (ForwardRef)
    in Gloss (ForwardRef) (created by SliderPane)"><pre class="notranslate"><code class="notranslate">Warning: Encountered two children with the same key, `confluence`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
    in div (created by ForwardRef(Gloss))
    in Gloss (ForwardRef)
    in Gloss (ForwardRef) (created by OnboardMain)
    in div (created by Gloss (ForwardRef))
    in Gloss (ForwardRef)
    in Gloss (ForwardRef) (created by SliderPane)
</code></pre></div>
<p dir="auto">Further, the <code class="notranslate">created by</code> information is often more useful to me, but it's never aligned nicely. Could do something like:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Warning: Encountered two children with the same key, `confluence`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
      in div (created by ForwardRef(Gloss))
      in Gloss (ForwardRef)
    from OnboardMain:
      in Gloss (ForwardRef)
   from Gloss (ForwardRef):
      in div
      in Gloss (ForwardRef)
   from SliderPane:
      in Gloss (ForwardRef)"><pre class="notranslate"><code class="notranslate">Warning: Encountered two children with the same key, `confluence`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
      in div (created by ForwardRef(Gloss))
      in Gloss (ForwardRef)
    from OnboardMain:
      in Gloss (ForwardRef)
   from Gloss (ForwardRef):
      in div
      in Gloss (ForwardRef)
   from SliderPane:
      in Gloss (ForwardRef)
</code></pre></div>
<p dir="auto">All together, if it would pick up displayNames, the stack would be far more readable for me:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Warning: Encountered two children with the same key, `confluence`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
      in div (created by Row)
      in View (forwardRef)
    from OnboardMain:
      in Row (forwardRef)
   from Col (forwardRef):
      in div
      in Grid (forwardRef)
   from SliderPane:
      in View (forwardRef)"><pre class="notranslate"><code class="notranslate">Warning: Encountered two children with the same key, `confluence`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
      in div (created by Row)
      in View (forwardRef)
    from OnboardMain:
      in Row (forwardRef)
   from Col (forwardRef):
      in div
      in Grid (forwardRef)
   from SliderPane:
      in View (forwardRef)
</code></pre></div>
<p dir="auto">People lose hours of work debugging a simple issue: two versions of React being loaded at the same time.</p>
<p dir="auto"><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="46378264" data-permission-text="Title is private" data-url="https://github.com/gaearon/react-hot-loader/issues/32" data-hovercard-type="issue" data-hovercard-url="/gaearon/react-hot-loader/issues/32/hovercard?comment_id=60043061&amp;comment_type=issue_comment" href="https://github.com/gaearon/react-hot-loader/issues/32#issuecomment-60043061">gaearon/react-hot-loader#32 (comment)</a><br>
<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="39042379" data-permission-text="Title is private" data-url="https://github.com/KyleAMathews/coffee-react-quickstart/issues/10" data-hovercard-type="issue" data-hovercard-url="/KyleAMathews/coffee-react-quickstart/issues/10/hovercard?comment_id=50655116&amp;comment_type=issue_comment" href="https://github.com/KyleAMathews/coffee-react-quickstart/issues/10#issuecomment-50655116">KyleAMathews/coffee-react-quickstart#10 (comment)</a><br>
<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="46525433" data-permission-text="Title is private" data-url="https://github.com/gaearon/react-document-title/issues/1" data-hovercard-type="issue" data-hovercard-url="/gaearon/react-document-title/issues/1/hovercard?comment_id=60241045&amp;comment_type=issue_comment" href="https://github.com/gaearon/react-document-title/issues/1#issuecomment-60241045">gaearon/react-document-title#1 (comment)</a><br>
<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="38944738" data-permission-text="Title is private" data-url="https://github.com/clayallsopp/react.backbone/issues/26" data-hovercard-type="issue" data-hovercard-url="/clayallsopp/react.backbone/issues/26/hovercard" href="https://github.com/clayallsopp/react.backbone/issues/26">clayallsopp/react.backbone#26</a></p>
<p dir="auto">Because there is no warning right away when this happens, they usually discover the problem through invariant violations. Some of them are descriptive (e.g. <code class="notranslate">Uncaught Error: Invariant Violation: The handler for Route "hello" must be a valid React component</code>) and I think I even saw warning that said something like "check if two copies of React are loaded", but some are really cryptic: <code class="notranslate">Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs...</code>.</p>
<p dir="auto">Is there a reason why we don't want to warn <em>right away</em> when two copies of React are loaded?</p>