how to get rigid of compile warning React Hook useEffect has missing dependencies: 'city' and 'country'. Either include them

Question

import React from "react";
import {useEffect, useState} from 'react';
import {Box, TextField, Button, makeStyles} from '@material-ui/core';
import {getData} from '../service/api.js';
import Information from './information.jsx'

const useStyles= makeStyles({
component:{
padding:20,
backgroundColor:'rgba(31, 100, 128)'
},

input:{
color:'white',
marginRight:15,
marginLeft:15,
},
button:{
width:100,
height:40,
marginLeft:10,
marginTop:5,
borderRadius:60,
backgroundColor:'rgba(41, 43, 46,0.6)'
}

})

const Form= ()=> {
const classes=useStyles();
const [data,getWeatherData]=useState();
const [city, setCity]=useState('');
const [country, setCountry]=useState('');
const [click, handleClick]=useState(false);

useEffect(()=>{
const getWeather=async()=>{
city && await getData(city,country).then(response =>{
getWeatherData(response.data);
console.log(response.data)
}
)
}
getWeather();
handleClick(false);
},[click]);

const handleCityChange=(value)=>{
setCity(value);
}

const handleCountryChange=(value)=>{
setCountry(value);
}

return (
<React.Fragment>
<Box className={classes.component}>
<TextField
label="Enter Your City"
onChange={(e)=>handleCityChange(e.target.value)}
inputProps={{className:classes.input}}
InputLabelProps={{
style: { color: 'rgba(184, 191, 194)' , fontSize:'13', paddingBottom:5},
}}
className={classes.input}
/>
<TextField id="standard-basic"
label="Enter Your Country"
onChange={(e)=>handleCountryChange(e.target.value)}
inputProps={{className:classes.input}}
InputLabelProps={{
style: { color: 'rgba(184, 191, 194)', fontSize:'13', paddingBottom:5 },
}}/>

<Button
variant="outlined"
onClick={(

Answer 1

Since your making api request i suggest you use axios.
Example

const Form = async ({city, country}) => {
const [data, setData] = useState(null);

useEffect(() => {
const res = await axios.get('/url', {city, country});
setData(res)
}, [city]);
}

Answer 2

Shweta
I tried to regenerate your app, hopefully can give you some hints so can solve your issues later, check it out.

https://code.sololearn.com/W8h7EJl5AU4S/?ref=app

Answer 3

Thank you to both of you. You both helped me alot the code is working fine now☺️ Apongpoh Gilbert Calviղ

Answer 4

install the dependency city and country

Answer 5

useEffect is relying on the {city, country} variable to make the API request. When the component re-renders, the value of {city, country} inside the useEffect could potentially be out of date. Since the effect has only run once, it will only have the value of {city, country} at the very first render.