title: Rendered more hooks than during the previous render when using hooks in subcomponent
body: <p>I am trying to understand how I can use React Hooks in subcomponents without triggering an error.</p>
  <p>Let's say I have a super simple component (all the code is runnable here - <a href="https://codesandbox.io/embed/xenodochial-wright-mwqlk?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="nofollow noreferrer">https://codesandbox.io/embed/xenodochial-wright-mwqlk?fontsize=14&amp;hidenavigation=1&amp;theme=dark</a>):</p>
  <pre class="lang-js prettyprint-override"><code>import { useEffect, useState } from &quot;react&quot;;
  
  const TestComponent = (index) =&gt; {
    const [a, setA] = useState(&quot;nothing&quot;);
  
    useEffect(() =&gt; {
      setA(index);
    }, [setA, index]);
  
    return &lt;&gt;{a}&lt;/&gt;;
  };
  
  export default TestComponent;
  
  </code></pre>
  <p>And it is used like this:</p>
  <pre class="lang-js prettyprint-override"><code>import { useEffect, useState } from &quot;react&quot;;
  import Component from &quot;./Component&quot;;
  
  export default function App() {
    const [arr, setArr] = useState([]);
  
    useEffect(() =&gt; {
      setArr([1]);
    }, []);
  
    const component = arr.map((_, index) =&gt; Component(index));
  
    return &lt;div&gt;{component}&lt;/div&gt;;
  }
  </code></pre>
  <p>Now I am getting an error:</p>
  <pre><code>Error
  Rendered more hooks than during the previous render.
  ▶ 5 stack frames were collapsed.
  TestComponent
  /src/Component.js:4:29
    1 | import { useEffect, useState } from &quot;react&quot;;
    2 | 
    3 | const TestComponent = (index) =&gt; {
  &gt; 4 |   const [a, setA] = useState(&quot;nothing&quot;);
      |                             ^
    5 | 
    6 |   useEffect(() =&gt; {
    7 |     setA(index);
  </code></pre>
  <p>There are more details in the console:</p>
  <pre><code>Warning: React has detected a change in the order of Hooks called by App. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks: https://reactjs.org/link/rules-of-hooks
  
     Previous render            Next render
     ------------------------------------------------------
  1. useState                   useState
  2. useEffect                  useEffect
  3. undefined                  useState
     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  
      at App (https://mwqlk.csb.app/src/App.js:24:41)
  </code></pre>
  <p>I understand the basic concept of the hooks rules that I cannot use hooks after <code>if</code> statements or such, they should always be on the top level.</p>
  <p>However, this case is clearly not using any conditionals for declaring the hooks. All additional hooks are actually in a subcomponent. So why are they accounted for by React as part of the App component?</p>
  <p>So, how can I safely use hooks in imported subcomponents then?</p>