title: How do I call API hooks one at a time?
body: <p>I am completely new to React and trying to figure this out, while still keeping it as simple as possible.</p>
  
  <p>I have a wrapper functional component called <code>RestaurantMapWrapper</code> that is supposed to:</p>
  
  <ol>
  <li>Get geolocation data from a hook called <code>usePosition</code>.</li>
  <li>pass the longitude and latitude data into a hook called <code>useYelpHook</code>, which retrieves data on restaurants using the passed in latitude and longitude data.</li>
  <li>Render the yelp data (automatically, without user input).</li>
  </ol>
  
  <p>The problem is that <code>usePosition</code> does not get the location in time, so <code>useYelpHook</code> has nothing to work with. If I set <code>pos</code> to a default value, then <code>useYelpHook</code> is never called again.</p>
  
  <p>How can I ensure that <code>useYelpHook</code> waits for <code>usePosition</code> before rendering? Does this have something to do with one hook being asynchronous?</p>
  
  <pre><code>export function RestaurantMapWrapper(props) {
      const { latitude, longitude, timestamp, accuracy, error, isLoadingMap } = usePosition();
      const pos = { lat: latitude, lng: longitude }; //ends up being undefined since neither have been retreived yet
      const [{ data, isLoading }, setLoc] = useYelpHook(pos); //is there somewhere I could call setLoc?
  
      return &lt;div&gt;JSON.stringify({data})&lt;/div&gt;;
  </code></pre>
  
  <pre><code>export const useYelpHook = (initialLoc) =&gt; {
      const API_KEY = 'my api key';
      const config = {
          headers: { Authorization: `Bearer ${API_KEY}` },
          params: {
              term: 'food',
              latitude: '0',
              longitude: '0',
              radius: '',
              sort_by: 'rating'
          }
      }
  
      const [data, setData] = useState({ businesses: [] });
      const [loc, setLoc] = useState(initialLoc);
      const [isLoading, setIsLoading] = useState(true);
   useEffect(() =&gt; {
          config.params.latitude = loc.lat;
          config.params.longitude = loc.lng;
  
          const fetchData = async () =&gt; {
              setIsLoading(true);
              const result = await axios(`${'https://cors-anywhere.herokuapp.com/'}https://api.yelp.com/v3/businesses/search`, config);
              setData(result.data);
              setIsLoading(false);
          };
  
          fetchData();
      }, [loc])
  
      return [{ data, isLoading }, setLoc];
  }
  </code></pre>
  
  <pre><code>import { useState, useEffect } from 'react';
  
  const defaultSettings = {
      enableHighAccuracy: false,
      timeout: Infinity,
      maximumAge: 0,
  };
  
  export const usePosition = (settings = defaultSettings) =&gt; {
      const [position, setPosition] = useState({});
      const [error, setError] = useState(null);
      const [isLoadingMap, setIsLoadingMap] = useState(true);
  
      const onChange = ({ coords, timestamp }) =&gt; {
          setPosition({
              latitude: coords.latitude,
              longitude: coords.longitude,
              accuracy: coords.accuracy,
              timestamp,
          });
      };
  
      const onError = (error) =&gt; {
          setError(error.message);
      };
  
      useEffect(() =&gt; {
          setIsLoadingMap(true);
          const geo = navigator.geolocation;
          if (!geo) {
              setError('Geolocation is not supported');
              return;
          }
          geo.getCurrentPosition(onChange, onError, settings);
          setIsLoadingMap(false);
  
      }, [settings]);
  
      return { ...position, error, isLoadingMap };
  };
  </code></pre>