title: How to call multiple hook functions depending on the result of the previous one
body: <p>I made a custom hook to call my api with an async hook and a hook handling the page number.</p>
  
  <p>A button "begin" make the first api call,</p>
  
  <p>a button "next" should increment the page number counter and THEN call the fetch function of the async hook</p>
  
  <p>When I do it naively, incrementing the counter then calling the fetch in a function onClick, of course the api call is made before the counter is incremented</p>
  
  <pre><code>import { useCounter, useAsyncFn } from 'react-use'
  
  const useCallApi = _ =&gt; {
      const [pageNumber, {inc}] = useCounter(0)
      const [results, fetch] = useAsyncFn(apiCall({pageNumber: pageNumber}), [pageNumber])
      return {
          results,
          fetch,
          inc
      }
  }
  
  const App = _ =&gt; {
      const {results, fetch, inc} = useCallApi()
  
      return &lt;&gt;
          &lt;Button onClick={fetch}&gt;begin&lt;/Button&gt;
          &lt;Button
            onClick={_ =&gt; {
              inc()
              fetch()  //of course it is not working
            }}
          &gt;next&lt;/Button&gt;
  
          //... display results
      &lt;/&gt;
  }
  </code></pre>
  
  <p>Basically how do I do to call multiples hook functions and make sure that the associated value of the previous is updated before calling the next one ?</p>