title: Calling custom hook in event handler
body: <p>I have a custom hook named <code>useFetchMyApi</code> wrapping a fetch call to API endpoint. The function hook accepts a parameter and it is included in the post body. The data array output is dependent on the hook parameter.</p>
  <p>On the UI, the App component calls <code>useFetchMyApi</code> once. A button click handler will call subsequent <code>useFetchMyApi</code> to update a list on the UI.</p>
  <p>My issues:</p>
  <ol>
  <li>I can't call <code>useFetchMyApi</code> in the event handler because it violates the rules of hook.</li>
  <li>How do I refresh the list of items dependent on the response of <code>useFetchMyApi</code>?</li>
  </ol>
  <pre><code>import React, { useState, useEffect, useRef } from &quot;react&quot;;
  import &quot;./styles.css&quot;;
  
  const useFetchMyApi = (location = &quot;&quot;) =&gt; {
    const [items, setItems] = useState([]);
    useEffect(() =&gt; {
      // let's stimulate the API call with a 2 seconds response time
      setTimeout(() =&gt; setItems([location, Math.random()]), 5000);
    }, [location]);
    return { items };
  };
  
  export default function App() {
    const locationSelect = useRef(null);
    const { items } = useFetchMyApi(&quot;mylocation1&quot;);
    const onButtonClicked = (event) =&gt; {
      const selectedLocation = locationSelect.current.value;
      // Call api and refresh items by location
      // Fix here??
      //useFetchMyApi(selectedLocation);
    };
  
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;select ref={locationSelect}&gt;
          &lt;option value=&quot;location1&quot;&gt;Location 1&lt;/option&gt;
          &lt;option value=&quot;location2&quot;&gt;Location 2&lt;/option&gt;
        &lt;/select&gt;
        &lt;button onClick={onButtonClicked}&gt;Refresh&lt;/button&gt;
        &lt;ul&gt;
          {items.map((item) =&gt; (
            &lt;li&gt;{item}&lt;/li&gt;
          ))}
        &lt;/ul&gt;
      &lt;/div&gt;
    );
  }
  
  </code></pre>
  <p><a href="https://codesandbox.io/s/stupefied-water-1o6mz?file=/src/App.js:0-1055" rel="noreferrer">https://codesandbox.io/s/stupefied-water-1o6mz?file=/src/App.js:0-1055</a></p>