React UseState keeps calling API over and over

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);
        }
      }, [])
         ^