In the upcoming lecture, we will be adding a second useEffect to handle debouncing. In order to resolve the case where a user will clear out the input-form, we need to add a conditional (similar to the issue described in this earlier lecture):

  useEffect(() => {
    const search = async () => {
      const { data } = await axios.get('https://en.wikipedia.org/w/api.php', {
        params: {
          action: 'query',
          list: 'search',
          origin: '*',
          format: 'json',
          srsearch: debouncedTerm,
        },
      });

      setResults(data.query.search);
    };
    if (debouncedTerm) {
      search();
    }
  }, [debouncedTerm]);