title: How to fetch data on page load and then on button click with useEffect
body: <p>I'm trying to implement the simple pattern of:</p>
  
  <ul>
  <li><code>GET</code> list</li>
  <li>enter new item, save</li>
  <li>make <code>POST</code> request</li>
  <li>make new <code>GET</code> request for updated data</li>
  </ul>
  
  <p>Starting with the code from <a href="https://www.robinwieruch.de/react-hooks-fetch-data/" rel="nofollow noreferrer">here</a>,</p>
  
  <pre><code>const useApi = () =&gt; {
    const [data, setData] = useState({ hits: [] });
    const [url, setUrl] = useState(
      'https://hn.algolia.com/api/v1/search?query=redux',
    );
  
    useEffect(() =&gt; {
      const fetchData = async () =&gt; {
          const result = await axios(url);
          setData(result.data);
      };
  
      fetchData();
    }, [url]);
  
    return [{ data }, setUrl];
  }
  </code></pre>
  
  <p>it's easy enough to make the initial fetch on page mount</p>
  
  <pre><code>  const [{ data }, doFetch] = useDataApi(
      'https://hn.algolia.com/api/v1/search?query=redux',
      { hits: [] },
    );
  </code></pre>
  
  <p>but what I don't understand is how to do a 'refresh' of the data. Since there's no stateful variable that determines if the hook should re-run, how can I manually invoke the hook on a button click?</p>