title: Only run a useEffect fetch after first useEffect fetch has fired and setUser in context
body: <p>I need to call the dropbox api twice.  The first useEffect gets the names and paths and then pushs them into a blank array in context.  Then I need the second useEffect to fire which relies on the arrays being populated from the first useEffect.  I have attempted to useState and create loading and setLoading and then wrap the inside of the useEffect in and if(loading) but that didn't work because I am guessing it only tries to fire when the component is mounted.  How do I make the second useEffect run once the first has completed?</p>
  <pre><code>const [user, setUser] = useContext(UserContext);
  </code></pre>
  <p>First useEffect:</p>
  <pre><code>useEffect(() =&gt; {
      var myHeaders = new Headers();
      myHeaders.append(
        'Authorization',
        'Bearer XXXXXXXXXXXXXXX',
      );
      myHeaders.append('Content-Type', 'application/json');
  
      var raw = JSON.stringify({path: `/${user.username}`});
  
      var requestOptions = {
        method: 'POST',
        headers: myHeaders,
        body: raw,
        redirect: 'follow',
      };
  
      fetch('https://api.dropboxapi.com/2/files/list_folder', requestOptions)
        .then(response =&gt; response.json())
        .then(data =&gt; {
          let tmpArray = [];
          let tmpArrayTwo = [];
          for (var i = 0; i &lt; data.entries.length; i++) {
            tmpArray.push(data.entries[i].name);
            tmpArrayTwo.push(data.entries[i].path_lower);
          }
          setUser({
            ...user,
            imageNames: tmpArray,
            imagePaths: tmpArrayTwo,
          });
        })
        .catch(error =&gt; console.log('error', error));
    }, []);
  </code></pre>
  <p>Second useEffect:</p>
  <pre><code>useEffect(() =&gt; {
      let tmpArray = [];
      var myHeaders = new Headers();
      myHeaders.append(
        'Authorization',
        'Bearer XXXXXXXXXXXXXX',
      );
      myHeaders.append('Content-Type', 'application/json');
  
      for (var i = 0; i &lt; user.imagePaths.length; i++) {
        var raw = JSON.stringify({path: `/${user.imagePaths[i]}`});
        var requestOptions = {
          method: 'POST',
          headers: myHeaders,
          body: raw,
          redirect: 'follow',
        };
        fetch(
          'https://api.dropboxapi.com/2/files/get_temporary_link',
          requestOptions,
        )
          .then(response =&gt; response.json())
          .then(data =&gt; {
            tmpArray.push(data.link);
          })
          .catch(error =&gt; console.log('error', error));
      }
      console.log(tmpArray);
      setUser({
        ...user,
        imageLinks: tmpArray,
      });
    }, []);
  </code></pre>
  <p>I am thinking it has something to do with the dependency array but everything I have put in there (like user, setUser) gives me an infinite loop and the console.log for the user.imagePaths keeps logging as []. I know user.imagePaths is populated after the first useEffect but the second useEffect keeps getting undefined for the user.imagePaths.length for the loop.</p>