title: React hooks error: Rendered more hooks than during the previous render
body: <p>I used to have a function component act as a page:</p>
  
  <pre class="lang-js prettyprint-override"><code>export default function NormalList(props) {
      const pageSize = 20;
      const [page, setPage] = useState(1)
      const [searchString, setSearchString] = useState(null);
      const [creditNotes, setCreditNotes] = useState(() =&gt; getCreditNoteList());
      const [ordering, setOrdering] = useState(null);
  
      useEffect(() =&gt; getCreditNoteList(), [page, searchString, ordering]);
  
      function getCreditNoteList() {
          API.fetchCreditNoteList({
              account_id: props.customerId, page, page_size: pageSize, searchString, ordering
          }).then(data =&gt; {
              setCreditNotes(data);
          });
      }
      return (&lt;&gt;{creditNotes.results.map(record =&gt; &lt;...&gt;}&lt;/&gt;)
  }
  </code></pre>
  
  <p>And this has been running fine, but recently I need to wrap around <code>NormalList</code> with <code>ListPage</code> component:</p>
  
  <pre class="lang-js prettyprint-override"><code>export default function ListPage(props) {
      const customerId = props.match.params.customer_id;
      return (&lt;div&gt;...&lt;div&gt;&lt;NormalList/&gt;&lt;/div&gt;&lt;/div&gt;)
  }
  </code></pre>
  
  <p>Then all the sudden I am getting this error <code>Rendered more hooks than during the previous render.</code></p>
  
  <p>It seems to me that <code>setCreditNotes(data)</code> inside <code>getCreditNoteList</code> is causing the error, but I don't know why.</p>