如何正确使用 UseCallback Hook

Question

The following code gives me a warning that

React Hook useEffect has a missing dependency: 'getData'.
Either include it or remove the dependency array

I know in the new rules of react I must wrap it in a useCallBack but I am unsure how to do so. Can someone please provide me with how to use, useCallBack properly. Thank you in advance!!

import React, { useState, useEffect, useCallback } from "react"
import axios from "axios"

const Home = () => {
  const [data, setData] = useState(null)
  const [query, setQuery] = useState("reacthooks")

  useEffect(() => {
    getData()
  }, [query])

  const getData = async () => {
    const response = await axios.get(
      `http://hn.algolia.com/api/v1/search?query=${query}`
    )
    setData(response.data)
  }

  const handleChange = event => {
    event.preventDefault()
    setQuery(event.target.value)
  }

  return (
    <div>
      <input type='text' onChange={handleChange} />
      {data &&
        data.hits.map(item => (
          <div key={item.objectID}>
            {item.url && (
              <>
                <a href={item.url}>{item.title}</a>
                <div>{item.author}</div>
              </>
            )}
          </div>
        ))}
    </div>
  )
}

export default Home

Answer 1

I would simply add the getData function into useEffect hook in your case instead.

Try the following:

useEffect(() => {
    const getData = async () => {
       const response = await axios.get(
           `http://hn.algolia.com/api/v1/search?query=${query}`
       )
       setData(response.data)
    }

    getData()
}, [query])

I hope this helps!