title: Call React hook depending on Promise
body: <p>I have an ID stored in AsyncStorage and depending on this call, I want to make a server request.</p>
  <p>So something like this is needed:</p>
  <pre><code>AsyncStorage.getID().then(id =&gt; {
     useLoadFromServer(id)
  }
  </code></pre>
  <p>But I always struggle with getting errors about using hooks wrong. So far I tried:</p>
  <pre><code>// First Approach
  const MyScreen = () =&gt; {
    const [ID, setID] = useState()
  
    AsyncStorage.getID()
      .then(id =&gt; setID(id))
      .catch(e =&gt; console.log(e))
    
    const { data } = useLoadRoot(ID) // Not the ID from AsyncStorage is used
  }
  </code></pre>
  <pre><code>//Second Approach
  const MyScreen = async () =&gt; {
    const [ID, setID] = useState()
  
    const IDPromise = AsyncStorage.getID()
    const { data } = useLoadRoot(await IDPromise) // Possible Unhandled Promise Rejection
  </code></pre>
  <p>also I tried to use <code>useEffect</code>, which leads to <code>React Hooks must be called in a React function component or a custom React Hook function</code></p>
  <p>The useLoadRoot-hook just calls another hook <code>UseLoadFromEndpoint</code> doing the <code>axios.get()</code></p>
  <p>When trying to move the AsyncStorage-Request to the customHook, I get the same errors, as I call the <code>useLoadFromEndpoint</code>-hook incorrectly, but I have to / want to reuse the UseLoadFromEndpoint-Hook. How can I achive this?</p>