title: Event handler throws invalid hook call error
body: <p>I am learning React and trying to implement a simple onClick button in a child Component only to get an &quot;Invalid hook call&quot;. I've gutted a lot of my program to isolate just the problem.</p>
  <p>Parent Component:</p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  import Menubar from '../Menubar/Menubar'
  
  function SortingVisualizer() {
      const [arr, setArr] = useState([]);
  
      function newArray() {
          const tempArr = [];
          for(let i = 0; i &lt; 100; i++) {
              tempArr.push(Math.floor(Math.random() * 100) + 5)
          }
          setArr(tempArr);
      }
  
      return (
          &lt;div id=&quot;main-container&quot;&gt;
  
              &lt;Menubar
                  data={arr}
              /&gt;
  
          &lt;/div&gt;
      )
  }
  
  export default SortingVisualizer;
  </code></pre>
  <p>Child Component in another module:</p>
  <pre><code>import React from &quot;react&quot;;
  
  import newArray from '../SortingVisualizer/SortingVisualizer'
  import bubbleSort from '../algorithms/bubbleSort'
  
  function Menubar(props) {
  return(
      &lt;div id=&quot;menubar-container&quot;&gt;
          &lt;button id=&quot;new-array-button&quot; onClick={() =&gt; newArray()}&gt;New Array&lt;/button&gt; // Invalid hook error
          &lt;button id=&quot;bubble-sort-button&quot; onClick={() =&gt; bubbleSort(props.data)}&gt;Bubble Sort&lt;/button&gt; // Works fine
      &lt;/div&gt;
      )
  }
  
  export default Menubar;
  </code></pre>
  <p>When I run &quot;npm ls react-dom&quot;, I only get a single version returned which should mean I do not have mismatching version problems:</p>
  <pre><code>`-- react-dom@17.0.2 
  </code></pre>
  <p>I suspect that I am breaking some hook rules but not sure which one. If I had to guess, based on another problem I saw, I think this has to do with the fact that hooks can only be used at the top level. I think that somehow my onClick for newArray is misusing that hook rule.</p>
  <p>But something else I don't get is...shouldn't &quot;import newArray...&quot; be enough to use a function from another module? Isn't that how it works in plain javascript where one module can use the function of another module simply by importing/exporting?</p>