title: How to fetch (Express) data ONLY once the (React) form-submitted data has been successfully received and served?
body: <p>I'm currently building a league of legends (a MOBA or multiplayer online battle arena game) search-based web app that essentially allows the user to search for their summoner's name and obtain general information regarding their search input. (The data is provided by the game's own third-party api)</p>
  
  <p>I've been able to successfully retrieve the form data and perform the intended backend processes, however, upon the client's initial render, my results-listing component is already trying to fetch the nonexistent processed data.</p>
  
  <p>How do I prevent the server request from firing until the server has actually successfully served the data?</p>
  
  <p>(abridged single-component client example)</p>
  
  <ul>
  <li>the summoner data endpoint is set to <code>http://localhost:3001/api/summoner</code></li>
  <li>server does not contain any additional routes</li>
  </ul>
  
  <pre><code>const App = () =&gt; {
    const [summName, setSummName] = useState('');
    const summonerFormData = new FormData();
    //  let data;
  
    const findSummoner = () =&gt; {
       summonerFormData.set('summonerName', summName);
    }
  
    // problem here
  
    const data = axios.get('http://localhost:3001/api/summoner');
  
    // axios.get('http://localhost:3001/api/summoner')
    //   .then(res =&gt; {
    //     data = res;  
    //   });
  
    return (
      &lt;div&gt;
        &lt;form
          method="POST"
          action="http://localhost:3001/api/summoner"
          onSubmit={findSummoner}
        &gt;
          &lt;input 
            value={summName} 
            name="summName" 
              onChange={e =&gt; setSummName(e.target.value)}
          /&gt;
          &lt;button type="submit"&gt;submit&lt;/button&gt;
        &lt;/form&gt;
  
        {data !== undefined &amp;&amp;
          &lt;div className="results"&gt;
            data.map(match =&gt; {
              &lt;div&gt;
                &lt;p&gt;{match.kills}&lt;/p&gt;
                &lt;p&gt;{match.deaths}&lt;/p&gt;
                &lt;p&gt;{match.assists}&lt;/p&gt;
              &lt;/div&gt;
            })
          &lt;/div&gt;
        }
      &lt;/div&gt;
    )
  }
  </code></pre>
  
  <hr>
  
  <p>Here's the <a href="https://github.com/ryee-dev/battlefy-leaguestats-app" rel="nofollow noreferrer">Repo</a> for some more context, but please don't hesitate to ask if you need more information or have any questions at all!</p>
  
  <p>I really appreciate any help I can get!</p>
  
  <p>Thanks!</p>
  
  <p><strong>Edits</strong>: </p>
  
  <ul>
  <li><p>I've also tried using the <code>useEffect</code> hook considering the lifecycle point I'm trying to fetch would be <code>componentDidMount</code>, but wasn't quite sure what the solution was. Doing more research atm!</p></li>
  <li><p>Close, but no cigar. Request gets stuck at 'pending'. </p></li>
  </ul>
  
  <pre><code>  let data;
  
    const fetchData = () =&gt; {
      axios.get('http://localhost:3001/api/summoner');
    };
  
    useEffect(() =&gt; {
      if (summName !== '') {
        fetchData();
      }
    }, summName);
  </code></pre>
  
  <ul>
  <li>I tried putting the axios request within an async function and awaiting on the request to respond, and it seems to be working, however, the server is still receiving undefined when the client starts, which then is attempting to be fetched, never allowing the promise to be fulfilled.</li>
  </ul>
  
  <pre><code>const fetchData = async () =&gt; {
    await axios
      .get('http://localhost:3001/api/summoner')
      .then(res =&gt; {
        data = res;
      })
      .catch(() =&gt; {
        console.log('error');
      });
  };
  
  useEffect(() =&gt; {
    fetchData();
  }, [])
  
  </code></pre>
  
  <ul>
  <li>So I took the advice and recommendations from @imjared and @HS and I'm literally so close..</li>
  </ul>
  
  <p>I just have one more problem... My data-mapping component is trying to map non-existent data before actually receiving it, giving me an error that it's unable to map match of undefined.. </p>
  
  <pre><code>  const [modalStatus, setModalStatus] = useState(false);
    const [loading, setLoading] = useState(false);
    const [data, setData] = useState({ hits: [] });
    const [summName, setSummName] = useState('');
    const [summQuery, setSummQuery] = useState('');
    const summonerFormData = new FormData();
    const prepareResults = async () =&gt; {
      await setSummQuery(summName);
    };
  
    const findSummoner = async () =&gt; {
      setLoading(true);
      setModalStatus(false);
      await summonerFormData.set('summonerName', summQuery);
    };
  
    useEffect(() =&gt; {
      const fetchData = async () =&gt; {
        if (summQuery) {
          setData({ hits: [] });
          console.log('fetching');
          await axios
            .get('http://localhost:3001/api/summoner')
            .then(res =&gt; {
              setData(res.data);
              setLoading(false);
              setModalStatus(true);
              return data;
            })
            .catch(error =&gt; {
              console.log(error);
            });
        }
      };
  
      fetchData();
    }, [summQuery]);
  </code></pre>
  
  <ul>
  <li>SUCCESS! Thank you guys! Here's what ended up working for me:</li>
  </ul>
  
  <pre><code>const findSummoner = async () =&gt; {
    setSummQuery(summName);
  };
  
  useEffect(() =&gt; {
    setData({ hits: [] });
    summonerFormData.set('summonerName', summQuery);
  
    const fetchData = async () =&gt; {
      setModalStatus(false);
      setLoading(true);
  
      if (summQuery !== '') {
        setLoading(true);
        console.log('fetching');
        await axios
          .get('/api/summoner')
          .then(res =&gt; {
            setData({
              hits: res.data,
            });
            setError(false);
            setLoading(false);
            setModalStatus(true);
            return data;
          })
          .catch(() =&gt; {
            setError(true);
            console.log('error');
          });
      }
    };
  
    if (summQuery !== '') {
      fetchData();
    }
  
  }, [summQuery]);
  </code></pre>