React UseState keeps calling API over and over - rest

Question

UseEffect keeps calling my api over and over again. If I keep everything the same and replace the axios call with just a simple console.log, though, UseEffect only completes once. I am including only one link on the navbar because that is all that is needed to create the problem.
Here is my router:
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import { Navbar, Nav} from 'react-bootstrap';
import Home from './Home.js';
import React from 'react';
export default function Routing(props) {
return (
<>
<Router>
<Navbar collapseOnSelect className="navbar">
<div className="h-box">
<Navbar.Brand>
<h1>Portland Watershed Data Dashboard</h1>
</Navbar.Brand>
</div>
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="ml-auto align-items-center">
<Link to="/"><h2 className="big link">Home</h2></Link>
</Nav>
</Navbar.Collapse>
</Navbar>
<Switch>
<>
<Route exact path="/">
<Home />
</Route>
<Route exact path="/home">
<Home />
</Route>
</>
</Switch>
</Router>
</>
)
}
and here is the api call on the Home component:
import { React, useEffect, useState } from "react";
import axios from 'axios';
export default function Home(props) {
const [discharge, setDischargeData] = useState(null);
useEffect(() => {
getDischargeData();
async function getDischargeData() {
const response = await axios.get("https://waterservices.usgs.gov/nwis/dv/?format=json&indent=on&parameterCd=00060&statCd=00003&sites=14211820,%2014144700,%2014211315,%2014206900,%2014211550"
);
setDischargeData(response.data);
console.log(response.data);
}
}, [discharge])
return (
<>
<p>test</p>
</>
)
}

Answer 1

You have an infinite loop:
Remove the parameter "discharge" from the brackets in your callback.
useEffect(() => {
getDischargeData();
async function getDischargeData() {
const response = await axios.get("https://waterservices.usgs.gov/nwis/dv/?format=json&indent=on&parameterCd=00060&statCd=00003&sites=14211820,%2014144700,%2014211315,%2014206900,%2014211550"
);
setDischargeData(response.data);
console.log(response.data);
}
}, [])
^