React Hook useEffect has a missing dependency: 'url'. Either include it or remove the dependency array react-hooks/exhaustive-deps

Question

useEffect(() => {
  fetch(url)
    .then(response => response.json())
    .then(data => setData(data[0]))
    .catch(err => console.warn(err))
}, [cityKey])

How do I solve this warning?

Answer 1

useEffect(() => {
  fetch(url)
    .then(response => response.json())
    .then(data => setData(data[0]))
    .catch(err => console.warn(err))
}, [cityKey,url])

Answer 2

As per the warning suggested solution, include url in the dependency array.

useEffect(() => {
  fetch(url)
    .then(response => response.json())
    .then(data => setData(data[0]))
    .catch(err => console.warn(err))
}, [cityKey, url])

Alternatively, you might disable the warning (but not recommended):

useEffect(() => {
  fetch(url)
    .then(response => response.json())
    .then(data => setData(data[0]))
    .catch(err => console.warn(err))
  // eslint-disable-next-line react-hooks/exhaustive-deps
}, [cityKey])