<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong><br>
bug</p>
<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">With custom hook with using Promise.all I'm noticing duplicate network requests, the issue occurs when I call the <code class="notranslate">setState</code> method of the hook. If I don't setState the call is made once.</p>
<p dir="auto">The same hook written without Promise.all seems to work fine, ie one fetch request.</p>
<p dir="auto">This could well be something with my code and happy to know if there's anything missing.</p>
<p dir="auto"><a href="https://gist.github.com/kang-chen/fe9fed2ca1c95a782713f76886a81865">https://gist.github.com/kang-chen/fe9fed2ca1c95a782713f76886a81865</a></p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (<a href="https://jsfiddle.net/Luktwrdm/" rel="nofollow">https://jsfiddle.net/Luktwrdm/</a>) or CodeSandbox (<a href="https://codesandbox.io/s/new" rel="nofollow">https://codesandbox.io/s/new</a>) example below:</strong></p>
<p dir="auto"><a href="https://codesandbox.io/s/hook-test-ndj7s" rel="nofollow">https://codesandbox.io/s/hook-test-ndj7s</a></p>
<p dir="auto">Open the network tab and view requests going out to test API, there should be only three requests although there are six.</p>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">No duplicated network calls using Promise.all in conjunction with custom hook.</p>
<p dir="auto"><strong>Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?</strong></p>
<p dir="auto">16.8.6</p>
<p dir="auto">I am migrating my UI from react-1.13.3 to 1.14.3 and encountered the following error messages when loading my page:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Uncaught Error: Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner)."><pre class="notranslate"><code class="notranslate">Uncaught Error: Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner).
</code></pre></div>
<p dir="auto">I tried to fix it but I still have it with the following simple component:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const Test = React.createClass({

  handleClick() {
    console.log(this.refs.test.value);
  },
  render() {
    return &lt;div&gt;&lt;input ref=&quot;test&quot; onClick={this.handleClick}/&gt;&lt;/div&gt;;
  }
});

export default {
  render(targetId) {
    return ReactDOM.render(&lt;Test hint=&quot;root&quot;/&gt;, document.getElementById(targetId));
  }
};"><pre class="notranslate"><code class="notranslate">const Test = React.createClass({

  handleClick() {
    console.log(this.refs.test.value);
  },
  render() {
    return &lt;div&gt;&lt;input ref="test" onClick={this.handleClick}/&gt;&lt;/div&gt;;
  }
});

export default {
  render(targetId) {
    return ReactDOM.render(&lt;Test hint="root"/&gt;, document.getElementById(targetId));
  }
};
</code></pre></div>
<p dir="auto">So clearly my ref is set in the <code class="notranslate">render</code> method in this code that fails.</p>
<p dir="auto">I investigated about the possibility of having twice React loaded and <code class="notranslate">npm ls|grep react@</code> has only one line. I am not sure this proves anything since we have a complex build that generates our code (and probably the issue is somewhere in our build), but I ensured React code is only once in our output script, I also put a breakpoint in ReactCurrentOwner line 20 and was hit only once. I don't know if this is sufficient but for me we load React only once, so I went deeper.</p>
<p dir="auto">When debugging I see that in the call to <code class="notranslate">addComponentAsRefTo: function (component, ref, owner)</code>, <code class="notranslate">owner</code> is <code class="notranslate">null</code>. I then put breakpoints when <code class="notranslate">ReactCurrentOwner.current</code> is set to a non null value (ReactCompositeComponent lines 146 and 605, ReactMultiChild line 196 and 211). When I start my application, the breakpoint in ReactCompositeComponent:146 is hit twice (and at this time, this._currentElement.props is <code class="notranslate">{hint:'root}</code> but each time it is reset to null on line 150. The call to addComponentAsRefTo is done outside these two windows where the owner is not null.</p>
<p dir="auto">What can I do to investigate more?</p>