Endless axios requests

Question

I've got this working correctly, reading and displaying data from a firebase database in React.

However, it's endlessly requesting data and eating ram & network.

Where have I gone wrong? I've checked other questions and answers on here but couldn't work it out.

function Requests() {


    const [RequestList, setRequests] = useState("");

    axios.get('firebasedatabase.json')
        .then(response => {
            const fetchedRequests = [];
            for (let key in response.data) {
                fetchedRequests.push({
                    ...response.data[key],
                    key: key
                });
            }
            setRequests(fetchedRequests);
            
        })
        .catch(error => console.log(error));
console.log(Requests, "requests");
    

    return (
        <>
            <div id="main">
                <header>
                    <h1>Requests</h1>
                </header>
                <p>
                    List of current requests
                </p>
                <div className="requestsContainer">
                    <table>
                        <thead>
                            <th>Title</th>
                            <th>Request By</th>
                            <th>Date</th>
                            <th>Remove</th>
                        </thead>
                        <tbody>
                            {
                                RequestList && RequestList.map((data, index) => {
                                    return (
                                        <tr key={index}>
                                        <td><a href={data.requestURL}>{data.requestTitle}</a></td>
                                        <td><a href={"mailto:" + data.contactEmail}>{data.requestUser}</a></td>
                                        <td>{data.requestDate}</td>
                                        <td>icon</td>
                                    </tr>
                                    )
                                })
                            }
                        </tbody>
                    </table>
                </div>
            </div>
        </>
    )
}


export default Requests;

Answer 1

You need to place your axios inside a function and call it inside useEffect. So this way it will only call axios once. Make sure to import useEffect in the top level.

const callApi = () => {
   axios
      .get('firebasedatabase.json')
      .then(response => {
         const fetchedRequests = [];
         for (let key in response.data) {
            fetchedRequests.push({
               ...response.data[key],
               key: key,
            });
         }
         setRequests(fetchedRequests);
      })
      .catch(error => console.log(error));
   console.log(Requests, 'requests');
};

useEffect(() => {
   callApi();
}, []);

Because a component gets re-rendered every time there is a change. In your case when you call Axios and you are setting the state which requires react to re-render. So when it re-renders the component, the Axios gets called again and again.