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

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

How do I solve this warning?

use-effect react-hooks reactjs
2 Answers
useEffect(() => {
  fetch(url)
    .then(response => response.json())
    .then(data => setData(data[0]))
    .catch(err => console.warn(err))
}, [cityKey,url])
user_122321270

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])
user_101582270
Related