<p dir="auto">While tracing codes, found that:</p>
<p dir="auto">Inside ReactCompositeComponentMixin.mountComponent, the code reads</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="    // These should be set up in the constructor, but as a convenience for
    // simpler class abstractions, we set them up after the fact.
    inst.props = publicProps;
    inst.context = publicContext;
    inst.refs = emptyObject;"><pre class="notranslate"><code class="notranslate">    // These should be set up in the constructor, but as a convenience for
    // simpler class abstractions, we set them up after the fact.
    inst.props = publicProps;
    inst.context = publicContext;
    inst.refs = emptyObject;
</code></pre></div>
<p dir="auto"><a href="https://github.com/facebook/react/blob/master/src/renderers/shared/reconciler/ReactCompositeComponent.js#L149">https://github.com/facebook/react/blob/master/src/renderers/shared/reconciler/ReactCompositeComponent.js#L149</a></p>
<p dir="auto">However, at ReactClass.createClass, the props and context are set already</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="      this.props = props;
      this.context = context;"><pre class="notranslate"><code class="notranslate">      this.props = props;
      this.context = context;
</code></pre></div>
<p dir="auto"><a href="https://github.com/facebook/react/blob/master/src/isomorphic/classic/class/ReactClass.js#L826">https://github.com/facebook/react/blob/master/src/isomorphic/classic/class/ReactClass.js#L826</a></p>
<p dir="auto">It seems no reason to have duplicated codes.<br>
Should we remove one of these two code snippets and only keep one ?<br>
Or  is there any reason for this ?</p>
<p dir="auto">If no other concerns, I would suggest move the setup of the props, context and refs back to the class constructor.<br>
Make the duty of constructing and the duty of mounting clear.</p>
<p dir="auto">Hello there!</p>
<p dir="auto">We, in our team, love the new Hooks API!<br>
But it comes with one negative thing we are experiencing since the 16.8 update...</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Hooks can only be called inside the body of a function component."><pre class="notranslate"><code class="notranslate">Hooks can only be called inside the body of a function component.
</code></pre></div>
<p dir="auto">We internally use multiple repositories.<br>
One for every customer project and multiple shared libraries.</p>
<p dir="auto">Since hooks require us to only have one copy of react in the scope (<a href="https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react" rel="nofollow">https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react</a>) we are forced to link our project to allow development of the shared libraries while running the dev server from the customer projects.<br>
So we have to link our projects depending on which project we are currently working on.</p>
<div class="highlight highlight-source-shell notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="#!/bin/bash
cd /shared-component-library
pushd ./node_modules/react &amp;&amp; yarn link &amp;&amp; popd
pushd ./node_modules/react-dom &amp;&amp; yarn link &amp;&amp; popd
yarn link

cd /shared-hooks-library
yarn link &quot;react&quot;
yarn link &quot;react-dom&quot;
yarn link

cd /customer-project-1
yarn link &quot;react&quot;
yarn link &quot;react-dom&quot;
yarn link &quot;shared-component-library&quot;
yarn link &quot;shared-hooks-library&quot;"><pre class="notranslate"><span class="pl-c"><span class="pl-c">#!</span>/bin/bash</span>
<span class="pl-c1">cd</span> /shared-component-library
<span class="pl-c1">pushd</span> ./node_modules/react <span class="pl-k">&amp;&amp;</span> yarn link <span class="pl-k">&amp;&amp;</span> <span class="pl-c1">popd</span>
<span class="pl-c1">pushd</span> ./node_modules/react-dom <span class="pl-k">&amp;&amp;</span> yarn link <span class="pl-k">&amp;&amp;</span> <span class="pl-c1">popd</span>
yarn link

<span class="pl-c1">cd</span> /shared-hooks-library
yarn link <span class="pl-s"><span class="pl-pds">"</span>react<span class="pl-pds">"</span></span>
yarn link <span class="pl-s"><span class="pl-pds">"</span>react-dom<span class="pl-pds">"</span></span>
yarn link

<span class="pl-c1">cd</span> /customer-project-1
yarn link <span class="pl-s"><span class="pl-pds">"</span>react<span class="pl-pds">"</span></span>
yarn link <span class="pl-s"><span class="pl-pds">"</span>react-dom<span class="pl-pds">"</span></span>
yarn link <span class="pl-s"><span class="pl-pds">"</span>shared-component-library<span class="pl-pds">"</span></span>
yarn link <span class="pl-s"><span class="pl-pds">"</span>shared-hooks-library<span class="pl-pds">"</span></span></pre></div>
<p dir="auto">This process has to be done for every frontend developer and does not work every time you try.<br>
Before you add new dependencies you have to unlink every linked dependency.<br>
and therefore it is very time consuming and is in our way.</p>
<hr>
<p dir="auto">Then we stumbled upon yarn plug'n play... which is not working for the most part. most npm packages cannot be installed, therefore its not a viable option for us.</p>
<p dir="auto">And then we tried the package manager <code class="notranslate">pnpm</code> which installs all dependencies on a central location in the filesystem and we thought that this might fix all of our issues. unfortunately there are two react instances too...</p>
<hr>
<p dir="auto">We would highly appreciate if someone would put some effort into this topic.<br>
Maybe by finding a way to make sure only one react instance is present - making it a Singleton somehow?!<br>
We don't have to re-invent the package management for this issue i think - it's just a matter of detecting of a react instance is already present - i think ^^</p>