title: Proper use of UseCallBack
body: <p>Currently, my code re-renders every time the query parameter is updated.  Once I remove the query parameter; however, I get a warning stating "React Hook useCallback has a missing dependency: 'query'. Either include it or remove the dependency array  react-hooks/exhaustive-deps".  I have tried just defining my getData function within the useEffect, but I am using getData as on onclick function outside of the useEffect.  What I am trying to accomplish is to initially fetch articles on react hooks and then only fetch new data on submit as opposed to when the query is updated and not have any warnings about query being a missing dependency as well.  Any suggestions would help immensely.  the code is as follows:</p>
  
  <pre><code>import React, { useState, useEffect, useCallback } from "react"
  import axios from "axios"
  
  const Home = () =&gt; {
    const [data, setData] = useState(null)
    const [query, setQuery] = useState("react hooks")
  
    const getData = useCallback(async () =&gt; {
      const response = await axios.get(
        `http://hn.algolia.com/api/v1/search?query=${query}`
      )
      setData(response.data)
    }, [query])
  
    useEffect(() =&gt; {
      getData()
    }, [getData])
  
    const handleChange = event =&gt; {
      event.preventDefault()
      setQuery(event.target.value)
    }
  
    return (
      &lt;div&gt;
        &lt;input type='text' onChange={handleChange} value={query} /&gt;
        &lt;button type='button' onClick={getData}&gt;
          Submit
        &lt;/button&gt;
        {data &amp;&amp;
          data.hits.map(item =&gt; (
            &lt;div key={item.objectID}&gt;
              {item.url &amp;&amp; (
                &lt;&gt;
                  &lt;a href={item.url}&gt;{item.title}&lt;/a&gt;
                  &lt;div&gt;{item.author}&lt;/div&gt;
                &lt;/&gt;
              )}
            &lt;/div&gt;
          ))}
      &lt;/div&gt;
    )
  }
  
  export default Home
  </code></pre>