title: react async hook how to do it
body: <p>This is my react component..</p>
  <pre class="lang-js prettyprint-override"><code>const DashboardContext = React.createContext()
  
  function DashboardStateProvider({ children }) {
    const wallet = useWallet()
  
    const Provider = DashboardContext.Provider
  
    if (wallet.account)
      return (
        &lt;WithSubscription Provider={Provider} connectedAccount={wallet.account}&gt;
          {children}
        &lt;/WithSubscription&gt;
      )
  
    return (
      &lt;Provider
        value={{
          
        }}
      &gt;
        {children}
      &lt;/Provider&gt;
    )
  }
  
  async function WithSubscription({ Provider, connectedAccount, children }) {
    // Juror ANT balances, 24h ANT movements and claimed subscription fees
    const data = await apiCALL(connectedAccount)
  
    // bla bla bla code here
  }
  
  function useDashboardState() {
    return useContext(DashboardContext)
  }
  
  export { DashboardStateProvider, useDashboardState }
  </code></pre>
  <p>The problem is that it shows an error when I use <code>async</code> on the <code>withSubscription</code> function. It's really mandatory, because in it, I am making an async call <code>await apiCALL</code>.</p>
  <p>ERROR:</p>
  <blockquote>
  <p>Unhandled Rejection (Error): Invalid hook call. Hooks can only be
  called inside of the body of a function component. This could happen
  for one of the following reasons:</p>
  <ol>
  <li>You might have mismatching versions of React and the renderer (such as React DOM)</li>
  <li>You might be breaking the Rules of Hooks</li>
  <li>You might have more than one copy of React in the same app See react-invalid-hook-call for tips about how to debug and
  fix this problem.</li>
  </ol>
  </blockquote>
  <p>Any ideas ? I have to fix this and i am not a react developer, so I'd appreciate the direct answer what to change exactly.</p>
  <p>UPDATE:</p>
  <p>How do I use <code>useDashboardState</code> ?</p>
  <pre class="lang-js prettyprint-override"><code>import { useDashboardState } from '../components/Dashboard/DashboardStateProvider'
  
   const {
      data
    } = useDashboardState()
  
  </code></pre>