Brtdku

I'm setting up a simple weather app using React and Hooks. However, I found out that the app keeps fetching API. How can I stop this?

function WeatherInfo (props) {

    const [wind,setWind] = useState(undefined);

    const [precipitation,setPrecipitation] = useState(undefined);

    const [humidity,setHumidity] = useState(undefined);

    const [pressure,setPressure] = useState(undefined);



    if (props.city) {

        useEffect(() => {

            fetch(`https://api.openweathermap.org/data/2.5/weather?q=${props.city}&units=metric&APPID=af081727ae6d5c4cbe2cd266b726e632`).then(results => {return results.json();}

            ).then(data => setWind(data.wind.speed))

        })

        useEffect(() => {

            fetch(`https://api.worldweatheronline.com/premium/v1/weather.ashx?key=a5bf94fc16c84928acb114156182311&q=${props.city}&num_of_days=1&tp=24&format=json`).then(results => {return results.json();}

            ).then(data => setPrecipitation(data.data.weather[0].hourly[0].chanceofrain))

        })

        useEffect(() => {

            fetch(`https://api.openweathermap.org/data/2.5/weather?q=${props.city}&units=metric&APPID=af081727ae6d5c4cbe2cd266b726e632`).then(results => {return results.json();}

            ).then(data => setPressure(data.main.pressure))

        })        

        useEffect(() => {

            fetch(`https://api.openweathermap.org/data/2.5/weather?q=${props.city}&units=metric&APPID=af081727ae6d5c4cbe2cd266b726e632`).then(results => {return results.json();}

            ).then(data => setHumidity(data.main.humidity))

        })





    }

    return (

        <div>

            {props.city &&  

            <div>

                <p>Wind of {props.city} is {wind}</p>

                <p>Chance of rain of {props.city} is {precipitation}%</p>

                <p>Humidity of {props.city} is {humidity}</p>

                <p>Pressure of {props.city} is {pressure}</p>

            </div>

            }

        </div>

    )

}



export default WeatherInfo;

Expect Result: Function only fetchs API once a while

By default, the useEffect hook is run on every rerender. If you don’t want that, you can specify a second optional argument, see https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects.

In your specific case: you probably only want to execute the effect when the city changes, so:
useEffect(/* callbacks as before */, [props.city]).

Furthermore, you should only call hooks at the top level (I.e. not in ifs): https://reactjs.org/docs/hooks-overview.html#%EF%B8%8F-rules-of-hooks. You can move the if branching into the callbacks of useEffect

you could use setInterval to limit how often the code runs like

setInterval(function(){

    if (props.city) {

        useEffect(() => {

            fetch(`https://api.openweathermap.org/data/2.5/weather?q=${props.city}&units=metric&APPID=af081727ae6d5c4cbe2cd266b726e632`).then(results => {return results.json();}

            ).then(data => setWind(data.wind.speed))

        })

        useEffect(() => {

            fetch(`https://api.worldweatheronline.com/premium/v1/weather.ashx?key=a5bf94fc16c84928acb114156182311&q=${props.city}&num_of_days=1&tp=24&format=json`).then(results => {return results.json();}

            ).then(data => setPrecipitation(data.data.weather[0].hourly[0].chanceofrain))

        })

        useEffect(() => {

            fetch(`https://api.openweathermap.org/data/2.5/weather?q=${props.city}&units=metric&APPID=af081727ae6d5c4cbe2cd266b726e632`).then(results => {return results.json();}

            ).then(data => setPressure(data.main.pressure))

        })        

        useEffect(() => {

            fetch(`https://api.openweathermap.org/data/2.5/weather?q=${props.city}&units=metric&APPID=af081727ae6d5c4cbe2cd266b726e632`).then(results => {return results.json();}

            ).then(data => setHumidity(data.main.humidity))

        })}}, 10000);

then just adjust the time for how often you want it to check