CODEWITHSUNDEEP
javascriptreactjsapi-keyopenweathermap
tung2389
tung2389

Reputation: 131

api key of openweathermap in react js

I have written a weather app by using API of openweathermap (free account) in React. I have used fetch in componentDidMount like this.

async componentDidMount()
  {
    const url1 = "https://api.openweathermap.org/data/2.5/weather?units=metric&q=Hanoi,VN&appid=" + api_key;
    const today = await GetData(url1);
    const url2 = "https://api.openweathermap.org/data/2.5/forecast?units=metric&q=Hanoi,VN&appid=" + api_key;
    const forecast = await GetData(url2);
    this.setState({
      data: today,
      forecast: forecast
    });

Considering my API key has been blocked once because of using it on more than 60 requests in a minute. Hence I have a question, if someone spams reload on my webpage,

  1. Will it call componentDidMount each time a reload happens?
  2. How can I prevent this?

Upvotes: 1

Views: 661

Answers (1)

ThinkGeek
ThinkGeek

Reputation: 5117

componentDidMount will be called every time a page is reloaded.

Please read about the component life cycle methods in details in official docs https://reactjs.org/docs/react-component.html#the-component-lifecycle. I don't think you can prevent componentDidMount from getting called on page reload. Because this is how it works.

However, you may make a call to openweatherapp from your server and use IP based throttling to prevent DoS attack on your server.

Upvotes: 1

Related Questions